/* ==========================================================
   AI Companion H5 - Main Styles
   Design width: 375px (iPhone reference)
   1rem = 100px @ 375px viewport (controlled by js/rem.js)
   Conversion: 1px = 0.01rem
   ========================================================== */

:root {
  --app-max-width: 430px;
  --bottom-nav-height: 0.64rem;
  --color-bg: #ffffff;
  --color-bg-soft: #fafafa;
  --color-text: #1a1a1f;
  --color-text-muted: #6a6a6a;
  --color-text-light: #9a9a9a;
  --color-border: #ececef;
  --color-border-soft: #f3f3f5;
  --color-arrow-bg: #f0f0f2;
  --color-accent: #ff3d77;
  --color-accent-soft: #ffe7ee;
  --color-diamond: #4cb6ff;
  --color-live: #ff2d5f;
  --color-online: #2ecc71;
  --color-badge-bg: #1a1a1f;
  --shadow-card: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.05);
  --shadow-badge: 0 0.01rem 0.02rem rgba(0, 0, 0, 0.1);
  --radius-card: 0.16rem;
  --radius-pill: 999px;
}

html, body {
  width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  background: var(--color-bg);
}

.app {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
  padding-bottom: calc(var(--bottom-nav-height) + 0.16rem + env(safe-area-inset-bottom));
  background: var(--color-bg);
}

body.is-overlay-open { overflow: hidden; }
body.is-search-open  { overflow: hidden; touch-action: none; }

/* ========== Search Bar ========== */
.search-bar {
  margin: calc(0.1rem + env(safe-area-inset-top)) 0.16rem 0.1rem;
  height: 0.46rem;
  background: #f5f5f7;
  border: none;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  padding-left: 0.18rem;
  font-size: 0.14rem;
  color: var(--color-text-muted);
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.search-bar:active { transform: scale(0.98); background: #eeeef0; }
.search-bar .icon-search {
  width: 0.16rem; height: 0.16rem; margin-right: 0.1rem;
  stroke: var(--color-text-muted); stroke-width: 3; fill: none;
}
.search-bar__text { line-height: 1; }

/* ========== Stories Ring ========== */
.stories {
  display: flex;
  gap: 0.12rem;
  overflow-x: auto;
  padding: 0.06rem 0.16rem 0.1rem;
  -webkit-overflow-scrolling: touch;
}

.story {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  cursor: pointer;
  width: 0.6rem;
}

.story__avatar-wrap {
  position: relative;
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 50%;
  padding: 0.025rem;
  background: linear-gradient(135deg, #ff3d77, #ff8a5b 50%, #ffd24c);
  display: flex;
  align-items: center;
  justify-content: center;
}
.story__avatar-wrap.is-viewed {
  background: #d8d8dc;
}

.story__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 0.02rem solid #fff;
}

.story__unread-badge {
  position: absolute;
  bottom: -0.01rem;
  right: -0.01rem;
  min-width: 0.18rem;
  height: 0.18rem;
  padding: 0 0.05rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.1rem;
  font-weight: 800;
  line-height: 0.18rem;
  text-align: center;
  border: 0.02rem solid #fff;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.03rem 0.08rem rgba(255, 61, 119, 0.38);
}

.story__avatar-wrap.has-unread {
  animation: unreadPulse 1.35s ease-in-out infinite;
}

@keyframes unreadPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 61, 119, 0.38); }
  50% { transform: scale(1.045); box-shadow: 0 0 0 0.06rem rgba(255, 61, 119, 0); }
}

.story__name {
  font-size: 0.11rem;
  color: var(--color-text);
  max-width: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Category Tabs ========== */
.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.24rem;
  padding: 0.04rem 0.16rem 0.08rem;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}
.tab {
  display: flex;
  align-items: center;
  padding: 0.08rem 0.04rem;
  position: relative;
  cursor: pointer;
  gap: 0.06rem;
}
.tab__label {
  font-size: 0.16rem;
  color: var(--color-text-light);
  font-weight: 600;
  transition: color 0.2s ease;
}
.tab.is-active .tab__label { color: var(--color-text); }
.tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -0.01rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.24rem;
  height: 0.03rem;
  background: var(--color-accent);
  border-radius: 0.03rem;
}
.tab__dot {
  width: 0.06rem; height: 0.06rem;
  background: var(--color-live);
  border-radius: 50%;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ========== Section ========== */
.section { padding: 0.18rem 0.16rem 0.04rem; }
.section__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.08rem;
}
.section__title {
  font-size: 0.2rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  flex: 1;
  padding-right: 0.12rem;
}
.section__arrow {
  width: 0.32rem; height: 0.32rem;
  border-radius: 50%;
  background: var(--color-arrow-bg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.section__arrow svg {
  width: 0.12rem; height: 0.12rem;
  stroke: var(--color-text); stroke-width: 3; fill: none;
}

/* ========== Mood Chips ========== */
.chips {
  display: flex; gap: 0.08rem;
  overflow-x: auto;
  padding: 0.12rem 0.16rem 0.04rem;
  -webkit-overflow-scrolling: touch;
}
.chip {
  flex: 0 0 auto;
  padding: 0.06rem 0.14rem;
  border-radius: var(--radius-pill);
  background: #f3f3f5;
  font-size: 0.13rem;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.chip.is-active {
  background: var(--color-text);
  color: #fff;
}

/* ========== Gender Tabs + Grid ========== */
.gender-tabs {
  display: flex; gap: 0.08rem; padding: 0.12rem 0.16rem; align-items: center;
}
.gender-tab {
  padding: 0.06rem 0.14rem; border-radius: var(--radius-pill); background:#f3f3f5; border:none; cursor:pointer; font-weight:600;
}
.gender-tab.is-active { background: var(--color-text); color: #fff; }

.gender-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.12rem;
  padding: 0 0.16rem 0.2rem;
  align-items: start;
}
.gender-grid--masonry {
  display: flex;
  gap: 0.12rem;
  align-items: flex-start;
}
.gender-grid--masonry .gender-grid__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}
.gender-card {
  display: block; width:100%; margin: 0; background:#fff; border-radius:var(--radius-card); box-shadow:var(--shadow-soft); overflow:hidden;
  padding: 0.08rem;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gender-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-card);
}
.gender-card__img { width:100%; aspect-ratio:3 / 4; height:auto; object-fit:cover; border-radius:0.12rem; display:block; }
.gender-card__name {
  font-size: 0.12rem;
  font-weight: 500;
  line-height: 1.28;
  margin-top: 0.06rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gender-card__tag {
  font-size: 0.105rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-text-light);
  margin-top: 0.025rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 420px) {
  .gender-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ========== Moments Feed ========== */
.feed {
  display: flex; flex-direction: column; gap: 0.12rem;
  padding: 0 0.16rem 0.2rem;
}
.feed--masonry {
  display: block;
  column-count: 2;
  column-gap: 0.12rem;
}
.liked-media-list {
  padding: 0;
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.12rem;
  padding: 0;
  align-items: start;
}
.works-grid .like-media-card {
  display: block;
  width: 100%;
  margin: 0;
}
.works-grid .like-media-card__media {
  aspect-ratio: 3 / 4;
}
.works-grid .like-media-card:nth-child(3n + 2) .like-media-card__media {
  aspect-ratio: 3 / 4;
}
.works-grid .work-card__meta {
  min-height: 1.12rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.like-media-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 0.12rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
  break-inside: avoid;
  cursor: pointer;
}
.like-media-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #f0f0f0;
  overflow: hidden;
}
.like-media-card:nth-child(3n + 2) .like-media-card__media { aspect-ratio: 1 / 1; }
.like-media-card__media img,
.like-media-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.like-media-card.is-locked img {
  filter: blur(12px);
  transform: scale(1.08);
}
.like-media-card__badge,
.like-media-card__lock {
  position: absolute;
  right: 0.08rem;
  top: 0.08rem;
  min-width: 0.24rem;
  height: 0.24rem;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.58);
  color: #fff;
  font-size: 0.11rem;
  font-weight: 800;
}
.like-media-card__lock {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: rgba(0,0,0,0.22);
}
.like-media-card__lock svg {
  width: 0.24rem;
  height: 0.24rem;
  fill: none;
  stroke: #fff;
  stroke-width: 1.8;
}
.work-card__status {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 800;
}
.work-card__spinner {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  border: 0.03rem solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: workSpin 0.8s linear infinite;
}
@keyframes workSpin {
  to { transform: rotate(360deg); }
}
.work-card__meta {
  padding: 0.09rem 0.1rem 0.1rem;
}
.work-card__title {
  font-size: 0.13rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.35;
  min-height: calc(0.13rem * 1.35 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.work-card__sub {
  margin-top: 0.03rem;
  font-size: 0.11rem;
  color: var(--color-text-light);
}
.work-card__download {
  margin-top: 0.08rem;
  width: 100%;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: #1a1a1f;
  color: #fff;
  font-size: 0.12rem;
  font-weight: 800;
}
.work-preview {
  position: fixed;
  inset: 0;
  left: 50%;
  width: 100%;
  max-width: var(--app-max-width);
  transform: translateX(-50%);
  z-index: 520;
  background: #050505;
  color: #fff;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.work-preview.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.work-preview__close {
  position: absolute;
  top: calc(0.12rem + env(safe-area-inset-top));
  left: 0.12rem;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.work-preview__close svg {
  width: 0.18rem;
  height: 0.18rem;
  stroke: currentColor;
  stroke-width: 2.4;
  fill: none;
}
.work-preview__media {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
}
.work-preview__media img,
.work-preview__media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.work-preview__bar {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.12rem 0.14rem calc(0.12rem + env(safe-area-inset-bottom));
  background: rgba(10,10,12,0.96);
}
.work-preview__text {
  flex: 1;
  min-width: 0;
}
.work-preview__title {
  font-size: 0.14rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.work-preview__status {
  margin-top: 0.03rem;
  font-size: 0.11rem;
  color: rgba(255,255,255,0.62);
}
.work-preview__download {
  height: 0.38rem;
  padding: 0 0.16rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 800;
}
.work-preview__download:disabled {
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.45);
}
.simple-list,
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.simple-row,
.settings-row {
  min-height: 0.56rem;
  padding: 0.12rem 0.14rem;
  border-radius: 0.12rem;
  background: #fff;
  box-shadow: var(--shadow-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.12rem;
}
.simple-row__title {
  font-size: 0.14rem;
  font-weight: 800;
  color: var(--color-text);
}
.simple-row__sub {
  margin-top: 0.03rem;
  font-size: 0.11rem;
  color: var(--color-text-light);
}
.simple-row__amount {
  font-size: 0.14rem;
  font-weight: 900;
  white-space: nowrap;
}
.simple-row__amount.is-plus { color: var(--color-accent); }
.simple-row__amount.is-minus { color: var(--color-text-muted); }
.settings-row span {
  font-size: 0.14rem;
  font-weight: 800;
  color: var(--color-text);
}
.settings-row input {
  width: 0.2rem;
  height: 0.2rem;
  accent-color: var(--color-accent);
}
.settings-danger {
  min-height: 0.46rem;
  border-radius: 0.12rem;
  background: #fff1f4;
  color: var(--color-accent);
  font-size: 0.14rem;
  font-weight: 900;
}
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 610;
  background: rgba(0,0,0,0.42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.16rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.auth-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.auth-panel {
  width: min(100%, 3.2rem);
  border-radius: 0.18rem;
  background: #fff;
  padding: 0.18rem;
  position: relative;
  box-shadow: 0 0.14rem 0.38rem rgba(0,0,0,0.22);
}
.auth-close {
  position: absolute;
  right: 0.14rem;
  top: 0.14rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #f3f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-close svg {
  width: 0.16rem;
  height: 0.16rem;
  stroke: var(--color-text);
  stroke-width: 2.4;
  fill: none;
}
.auth-title {
  font-size: 0.22rem;
  font-weight: 900;
  color: var(--color-text);
}
.auth-tabs {
  display: flex;
  gap: 0.08rem;
  margin: 0.16rem 0;
}
.auth-tab {
  flex: 1;
  height: 0.38rem;
  border-radius: var(--radius-pill);
  background: #f2f2f4;
  color: var(--color-text-muted);
  font-size: 0.14rem;
  font-weight: 900;
}
.auth-tab.is-active {
  background: #1a1a1f;
  color: #fff;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.auth-label {
  font-size: 0.12rem;
  font-weight: 800;
  color: var(--color-text);
}
.auth-input {
  height: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 0.12rem;
  padding: 0 0.12rem;
  font-size: 0.14rem;
}
.auth-input:focus {
  outline: none;
  border-color: var(--color-accent);
}
.auth-submit,
.auth-copy {
  height: 0.42rem;
  margin-top: 0.08rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.14rem;
  font-weight: 900;
}
.auth-result {
  margin-top: 0.14rem;
  padding: 0.12rem;
  border-radius: 0.14rem;
  background: #fafafa;
}
.auth-result__title {
  font-size: 0.15rem;
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 0.08rem;
}
.auth-result__line {
  font-size: 0.13rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}
.auth-result__line span {
  color: var(--color-text);
  font-weight: 800;
}
.feed-end {
  text-align: center;
  font-size: 0.12rem;
  color: var(--color-text-light);
  padding: 0.2rem 0 0.3rem;
}
.feed-empty {
  text-align: center;
  font-size: 0.14rem;
  color: var(--color-text-muted);
  padding: 0.4rem 0.3rem;
  line-height: 1.6;
}

.moment {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  padding: 0.14rem 0.14rem 0.1rem;
  box-shadow: var(--shadow-soft);
}
.moment__head {
  display: flex; align-items: center; gap: 0.1rem;
  cursor: pointer;
}
.moment__avatar {
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
}
.moment__head-text { flex: 1; min-width: 0; }
.moment__name {
  display: flex; align-items: center; gap: 0.06rem;
  font-size: 0.14rem; font-weight: 700; color: var(--color-text);
}
.moment__mood {
  display: inline-block;
  font-size: 0.1rem;
  font-weight: 500;
  padding: 0.02rem 0.07rem;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}
.moment__mood--daily  { background: #eaf3ff; color: #2b7be4; }
.moment__mood--selfie { background: var(--color-accent-soft); color: var(--color-accent); }
.moment__mood--sleepy { background: #f1ecff; color: #7a5cff; }
.moment__mood--tease  { background: #fff0ea; color: #ff7a3d; }
.moment__mood--travel { background: #e9faef; color: #1ea866; }

.moment__time {
  font-size: 0.11rem; color: var(--color-text-light); margin-top: 0.02rem;
}
.moment__follow {
  font-size: 0.12rem; font-weight: 600; color: #fff;
  background: var(--color-accent);
  padding: 0.05rem 0.12rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease;
}
.moment__follow.is-following {
  color: var(--color-text-muted);
  background: #f0f0f2;
}
.moment__text {
  font-size: 0.14rem;
  color: var(--color-text);
  line-height: 1.5;
  margin: 0.1rem 0;
  word-break: break-word;
}
.moment__media-wrap {
  position: relative;
  border-radius: 0.1rem;
  overflow: hidden;
  margin-bottom: 0.06rem;
  cursor: pointer;
}
.moment__media {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.04rem;
}
.moment__media--grid { grid-template-columns: 1fr 1fr; }
.moment__media-item {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  overflow: hidden;
}
.moment__media:not(.moment__media--grid) .moment__media-item { aspect-ratio: 4 / 5; }
.moment__media-item img,
.moment__media-item video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-play-badge {
  position: absolute;
  right: 0.08rem;
  bottom: 0.08rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.moment__media-wrap.is-locked .moment__media-item img,
.moment__media-wrap.is-locked .moment__media-item video {
  filter: blur(20px);
  transform: scale(1.05);
}
.moment__media--locked { position: relative; }
.moment__media--locked .moment__media-item img,
.moment__media--locked .moment__media-item video {
  filter: blur(22px);
  transform: scale(1.08);
}
.moment__media--locked.moment__media--textonly {
  background:
    linear-gradient(135deg, rgba(122, 92, 255, 0.22) 0%, rgba(255, 96, 153, 0.16) 100%),
    #1a1a1f;
  min-height: 1.4rem;
  border-radius: 0.1rem;
  overflow: hidden;
}
.moment__lock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.06rem;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  text-align: center;
  padding: 0.12rem;
}
.moment__lock-icon svg {
  width: 0.32rem; height: 0.32rem;
  fill: none; stroke: #fff; stroke-width: 1.8;
}
.moment__lock-title {
  font-size: 0.12rem;
  font-weight: 600;
  color: #fff;
  opacity: 0.92;
  letter-spacing: 0.02rem;
}
.moment__lock-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  font-size: 0.13rem;
  font-weight: 800;
  padding: 0.06rem 0.16rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #7a5cff 0%, #ff6099 100%);
  color: #fff;
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.35);
  margin-top: 0.02rem;
}
.moment__lock-text {
  font-size: 0.13rem; font-weight: 600;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.06rem 0.12rem;
  border-radius: var(--radius-pill);
}
.moment__unlock {
  display: inline-flex; align-items: center; gap: 0.06rem;
  background: var(--color-accent); color: #fff;
  font-size: 0.13rem; font-weight: 700;
  padding: 0.08rem 0.16rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.04rem 0.12rem rgba(255, 61, 119, 0.4);
}
.moment__unlock-icon svg {
  width: 0.14rem; height: 0.14rem;
  fill: none; stroke: #fff; stroke-width: 1.6;
}
.moment__foot {
  display: flex; align-items: center; gap: 0.18rem;
  padding-top: 0.04rem;
}
.moment__action {
  display: inline-flex; align-items: center; gap: 0.05rem;
  font-size: 0.12rem; font-weight: 600;
  color: var(--color-text-muted);
  background: none;
}
.moment__action svg {
  width: 0.2rem; height: 0.2rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
.moment__action.is-liked { color: var(--color-accent); }
.moment__action.is-liked svg { fill: var(--color-accent); stroke: var(--color-accent); }
.moment__action--chat {
  margin-left: auto;
  background: #f5f5f7;
  color: var(--color-text);
  padding: 0.06rem 0.14rem;
  border-radius: var(--radius-pill);
}
.moment__action--chat.is-disabled,
.moment__action--chat:disabled {
  color: var(--color-text-light);
  opacity: 0.55;
  cursor: default;
}

/* ========== Bottom Nav ========== */
.bottom-nav {
  position: fixed; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--app-max-width);
  height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--color-border);
  display: flex; justify-content: space-around; align-items: center;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 250;
  pointer-events: auto;
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--color-text-light);
  gap: 0.02rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-item.is-active { color: var(--color-accent); }
.nav-item svg {
  width: 0.22rem; height: 0.22rem;
  fill: none; stroke: currentColor; stroke-width: 2;
}
.nav-item__label { font-size: 0.1rem; font-weight: 600; }
.nav-item--logo svg { width: 0.34rem; height: 0.34rem; stroke-width: 1.6; }
.nav-item--logo { color: var(--color-accent); }
.nav-item--logo .nav-item__label { margin-top: -0.02rem; }

/* ========== Search Overlay ========== */
.search-overlay {
  position: fixed; top: 0; left: 50%; bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  height: 100vh; height: 100dvh;
  background: #fff;
  z-index: 200;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-0.2rem);
  transition: opacity 0.28s ease,
              transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0.28s;
  padding-top: env(safe-area-inset-top);
}
.search-overlay.is-open {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.28s ease,
              transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              visibility 0s linear 0s;
}
.search-overlay__head {
  display: flex; align-items: center;
  padding: 0.12rem 0.16rem; gap: 0.1rem;
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}
.search-input-wrap {
  flex: 1; position: relative; height: 0.44rem;
  background: #f5f5f7; border-radius: 0.22rem;
  display: flex; align-items: center; padding: 0 0.4rem;
}
.search-input-wrap:focus-within {
  background: #fff; box-shadow: 0 0 0 0.02rem #e0e0e0 inset;
}
.search-input-wrap .icon-search {
  position: absolute; left: 0.14rem; top: 50%;
  transform: translateY(-50%);
  width: 0.16rem; height: 0.16rem;
  stroke: var(--color-text); stroke-width: 3; fill: none;
  pointer-events: none;
}
.search-input {
  flex: 1; width: 100%; height: 100%;
  border: none; background: transparent;
  font-size: max(0.15rem, 16px); color: var(--color-text);
  padding: 0; appearance: none; -webkit-appearance: none;
}
.search-input::placeholder { color: #b0b0b0; }
.search-input::-webkit-search-cancel-button,
.search-input::-webkit-search-decoration {
  -webkit-appearance: none; appearance: none;
}
.search-input__clear {
  position: absolute; right: 0.08rem; top: 50%;
  transform: translateY(-50%);
  width: 0.24rem; height: 0.24rem;
  border-radius: 50%;
  background: #c0c0c0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.18s ease;
}
.search-input__clear[hidden] { display: none; }
.search-input-wrap.has-value .search-input__clear { opacity: 1; }
.search-input__clear svg {
  width: 0.12rem; height: 0.12rem;
  stroke: #fff; stroke-width: 2; fill: none;
}
.search-cancel {
  font-size: 0.15rem; color: var(--color-text); font-weight: 500;
  padding: 0.04rem 0.04rem 0.04rem 0.08rem;
  max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
  transition: max-width 0.28s ease, opacity 0.28s ease, padding 0.28s ease;
}
.search-overlay.is-open .search-cancel {
  max-width: 1rem; opacity: 1;
  padding: 0.04rem 0.04rem 0.04rem 0.08rem;
}
.search-cancel:active { opacity: 0.6; }
.search-overlay__body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.16rem 0.16rem 0.4rem;
}
.search-section-title {
  font-size: 0.13rem; color: var(--color-text-muted);
  font-weight: 600; margin: 0.16rem 0 0.08rem;
  letter-spacing: 0.01rem;
}
.search-section-title:first-child { margin-top: 0; }
.search-suggest { display: flex; flex-direction: column; }
.search-suggest__item {
  display: flex; align-items: center;
  padding: 0.14rem 0.04rem;
  border-bottom: 1px solid #f3f3f3;
  font-size: 0.15rem; color: var(--color-text);
  cursor: pointer; transition: background 0.15s ease;
}
.search-suggest__item:active { background: #f8f8f8; }
.search-suggest__item svg {
  width: 0.18rem; height: 0.18rem; margin-right: 0.12rem;
  fill: none; stroke: #888; stroke-width: 2; flex-shrink: 0;
}
.search-suggest__item .search-suggest__text {
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.search-suggest__empty {
  font-size: 0.13rem; color: #b0b0b0;
  padding: 0.16rem 0.04rem; text-align: left;
}

/* ========== Toast ========== */
.toast {
  position: fixed; left: 50%; top: 40%;
  transform: translate(-50%, -50%) scale(0.9);
  background: rgba(0, 0, 0, 0.82); color: #fff;
  font-size: 0.14rem; padding: 0.12rem 0.2rem;
  border-radius: 0.08rem; z-index: 1000;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 70vw; text-align: center; line-height: 1.4;
}
.toast.is-show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ========== Creator Profile Page (slide-up) ========== */
.creator-page {
  position: fixed; top: 0; left: 50%; bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  height: 100vh; height: 100dvh;
  background: #fff;
  z-index: 300;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.24s ease,
              visibility 0s linear 0.32s;
}
.creator-page.is-open {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.24s ease,
              visibility 0s linear 0s;
}

.creator-page__back {
  position: fixed; top: calc(0.12rem + env(safe-area-inset-top)); left: 0.14rem;
  width: 0.36rem; height: 0.36rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.creator-page__back svg {
  width: 0.18rem; height: 0.18rem;
  stroke: #fff; stroke-width: 2.4; fill: none;
}

.creator-page__hero {
  position: relative;
  width: 100%;
  height: 2.6rem;
  overflow: hidden;
  background: #ddd;
}
.creator-page__cover {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.creator-page__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 50%,
    rgba(255,255,255,0.3) 80%,
    #fff 100%);
}

.creator-page__body {
  position: relative;
  padding: 0 0.16rem 1rem;
  margin-top: -0.4rem;
}

.creator-page__header {
  display: flex;
  align-items: flex-end;
  gap: 0.12rem;
}
.creator-page__avatar {
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  border: 0.04rem solid #fff;
  background: #f0f0f0;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}
.creator-page__name-wrap {
  flex: 1; min-width: 0;
  padding-bottom: 0.06rem;
}
.creator-page__name-row {
  display: flex; align-items: center; gap: 0.08rem;
}
.creator-page__name {
  font-size: 0.22rem;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}
.creator-page__online-dot {
  width: 0.1rem; height: 0.1rem;
  background: var(--color-online);
  border-radius: 50%;
  box-shadow: 0 0 0 0.03rem rgba(46, 204, 113, 0.2);
}
.creator-page__tagline {
  font-size: 0.13rem;
  color: var(--color-text-muted);
  margin-top: 0.04rem;
}
.creator-page__bio {
  margin-top: 0.14rem;
  font-size: 0.125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.creator-page__stats {
  display: flex;
  gap: 0.1rem;
  margin: 0.16rem 0;
  padding: 0.14rem 0.1rem;
  background: #fafafa;
  border-radius: var(--radius-card);
}
.stat {
  flex: 1;
  text-align: center;
  display: flex; flex-direction: column; gap: 0.02rem;
}
.stat__num {
  font-size: 0.18rem; font-weight: 800; color: var(--color-text);
}
.stat__label {
  font-size: 0.11rem; color: var(--color-text-muted);
}

.intimacy-bar {
  margin-bottom: 0.16rem;
}
.intimacy-bar__head {
  display: flex; justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.06rem;
}
.intimacy-bar__label {
  font-size: 0.13rem; font-weight: 700; color: var(--color-accent);
}
.intimacy-bar__hint {
  font-size: 0.11rem; color: var(--color-text-light);
}
.intimacy-bar__track {
  width: 100%; height: 0.06rem;
  background: #f0f0f2;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.intimacy-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, #ff3d77, #ff8a5b);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
}

.creator-page__actions {
  display: flex; gap: 0.08rem;
  margin-bottom: 0.16rem;
}
.cta {
  height: 0.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.14rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center; justify-content: center;
  padding: 0 0.18rem;
  gap: 0.06rem;
}
.cta svg { width: 0.16rem; height: 0.16rem; fill: none; stroke: currentColor; stroke-width: 2; }
.cta--follow {
  flex: 1;
  background: var(--color-accent);
  color: #fff;
}
.cta--follow.is-following {
  background: #f0f0f2;
  color: var(--color-text);
}
.cta--chat {
  flex: 1;
  background: #1a1a1f;
  color: #fff;
}
.cta--chat.is-disabled,
.cta--chat:disabled {
  background: #ececf0;
  color: var(--color-text-light);
  cursor: default;
}
.cta--gift {
  width: 0.4rem;
  padding: 0;
  background: #fff7c4;
  color: #b6890a;
}

/* ����ǩ�� AI ��� (creator profile + studio preview share this) */
.cp-module-slot { margin-bottom: 0.16rem; }
.cp-module-slot:empty { display: none; }

.cp-interact {
  display: grid;
  grid-template-columns: 0.48rem 1fr auto;
  align-items: center;
  gap: 0.12rem;
  padding: 0.14rem;
  margin-bottom: 0.1rem;
  border-radius: 0.16rem;
  background: linear-gradient(135deg, rgba(255, 96, 153, 0.12), rgba(255, 196, 87, 0.16)), #fff;
  border: 1px solid rgba(255, 96, 153, 0.16);
  box-shadow: 0 0.04rem 0.16rem rgba(255, 96, 153, 0.08);
}
.cp-interact__icon {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.14rem;
  background: rgba(255, 255, 255, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: var(--color-accent);
  box-shadow: 0 0.02rem 0.08rem rgba(255, 96, 153, 0.16);
}
.cp-interact__icon::before {
  content: "\2661";
  font-size: 0.28rem;
  line-height: 1;
  font-weight: 900;
}
.cp-interact__body { min-width: 0; }
.cp-interact__name {
  font-size: 0.15rem;
  font-weight: 800;
  color: var(--color-text);
}
.cp-interact__sub,
.cp-interact__meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-interact__sub {
  margin-top: 0.02rem;
  font-size: 0.115rem;
  color: var(--color-text-muted);
}
.cp-interact__meta {
  margin-top: 0.04rem;
  font-size: 0.105rem;
  color: #c04e78;
}
.cp-interact__enter {
  min-width: 0.64rem;
  height: 0.36rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0.04rem 0.12rem rgba(255, 61, 119, 0.22);
}

.cp-module {
  display: grid;
  grid-template-columns: 0.48rem 1fr auto;
  align-items: center;
  gap: 0.12rem;
  padding: 0.14rem;
  border-radius: 0.16rem;
  background:
    linear-gradient(135deg, rgba(122, 92, 255, 0.14) 0%, rgba(255, 96, 153, 0.10) 100%),
    #fff;
  border: 1px solid rgba(122, 92, 255, 0.18);
  box-shadow: 0 0.04rem 0.16rem rgba(122, 92, 255, 0.08);
}
.cp-module__emoji {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 0.14rem;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.28rem;
  line-height: 1;
  box-shadow: 0 0.02rem 0.08rem rgba(122, 92, 255, 0.16);
}
.cp-module__body { min-width: 0; }
.cp-module__name {
  font-size: 0.15rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-module__tagline {
  font-size: 0.115rem;
  color: var(--color-text-muted);
  margin-top: 0.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-module__desc {
  font-size: 0.115rem;
  color: var(--color-text-light);
  margin-top: 0.04rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cp-module__enter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02rem;
  padding: 0.08rem 0.14rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #7a5cff 0%, #ff6099 100%);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0.04rem 0.12rem rgba(122, 92, 255, 0.32);
  cursor: pointer;
  border: 0;
}
.cp-module__enter-price {
  font-size: 0.14rem;
  font-weight: 800;
}
.cp-module__enter-unit {
  font-size: 0.1rem;
  opacity: 0.85;
}
.cp-module__enter-cta {
  font-size: 0.105rem;
  margin-top: 0.02rem;
  letter-spacing: 0.02rem;
  opacity: 0.95;
}

.creator-page__tabs {
  display: flex;
  gap: 0.18rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0.12rem;
}
.cp-tab {
  padding: 0.1rem 0.02rem;
  font-size: 0.14rem;
  color: var(--color-text-light);
  font-weight: 600;
  position: relative;
  cursor: pointer;
}
.cp-tab.is-active { color: var(--color-text); }
.cp-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -0.01rem;
  left: 0; right: 0;
  height: 0.02rem;
  background: var(--color-accent);
  border-radius: 0.02rem;
}

.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.04rem;
}
.cp-grid__item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.06rem;
  overflow: hidden;
  background: #f0f0f0;
  cursor: pointer;
}
.cp-grid__item img,
.cp-grid__item video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cp-grid__item.is-locked img,
.cp-grid__item.is-locked video {
  filter: blur(8px);
  transform: scale(1.1);
}
.cp-grid__lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}
.cp-grid__lock svg {
  width: 0.24rem; height: 0.24rem;
  fill: none; stroke: #fff; stroke-width: 1.8;
}

.cp-about {
  display: flex; flex-direction: column;
  gap: 0.1rem;
  padding: 0.08rem 0.04rem;
}
.cp-about__row {
  display: flex;
  gap: 0.12rem;
  font-size: 0.13rem;
  align-items: flex-start;
}
.cp-about__k {
  width: 0.7rem; flex-shrink: 0;
  color: var(--color-text-muted); font-weight: 600;
}
.cp-about__v { color: var(--color-text); line-height: 1.5; }

/* ========== Immersive Moment Viewer ========== */
.viewer {
  position: fixed; top: 0; left: 50%; bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  height: 100vh; height: 100dvh;
  background: #000;
  z-index: 400;
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) scale(0.96);
  transition: transform 0.28s ease, opacity 0.24s ease,
              visibility 0s linear 0.28s;
}
.viewer.is-open {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: transform 0.28s ease, opacity 0.24s ease,
              visibility 0s linear 0s;
}

.viewer__close {
  position: fixed;
  top: calc(0.12rem + env(safe-area-inset-top));
  right: 0.14rem;
  width: 0.36rem; height: 0.36rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
}
.viewer__close svg {
  width: 0.18rem; height: 0.18rem;
  stroke: #fff; stroke-width: 2.4; fill: none;
}

.viewer__scroll {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

.viewer__item {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.viewer__media {
  position: absolute;
  inset: 0;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.viewer__media img,
.viewer__media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.viewer__media.is-locked img,
.viewer__media.is-locked video {
  filter: blur(28px);
  transform: scale(1.15);
}

.viewer__lock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.16rem;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
}
.viewer__lock-icon svg {
  width: 0.5rem; height: 0.5rem;
  fill: none; stroke: #fff; stroke-width: 1.6;
}
.viewer__lock-text {
  font-size: 0.14rem; font-weight: 600;
  background: rgba(0, 0, 0, 0.45);
  padding: 0.08rem 0.16rem;
  border-radius: var(--radius-pill);
}
.viewer__unlock-btn {
  background: var(--color-accent);
  color: #fff;
  font-size: 0.15rem; font-weight: 800;
  padding: 0.12rem 0.24rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.06rem 0.2rem rgba(255, 61, 119, 0.5);
}

.viewer__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.1) 35%,
    rgba(0,0,0,0) 60%);
}

.viewer__rail {
  position: absolute;
  right: 0.12rem;
  bottom: 0.28rem;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  pointer-events: auto;
}

.viewer__rail-avatar {
  position: relative;
  width: 0.48rem; height: 0.48rem;
  cursor: pointer;
}
.viewer__rail-avatar img {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 0.02rem solid #fff;
  object-fit: cover;
}
.viewer__rail-plus {
  position: absolute;
  bottom: -0.05rem;
  left: 50%;
  transform: translateX(-50%);
  width: 0.18rem; height: 0.18rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  font-size: 0.14rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: 0.02rem solid #fff;
}

.viewer__rail-btn {
  display: flex; flex-direction: column;
  align-items: center; gap: 0.03rem;
  color: #fff;
  font-size: 0.1rem;
  font-weight: 600;
  background: none;
  text-shadow: 0 0.01rem 0.03rem rgba(0, 0, 0, 0.5);
}
.viewer__rail-btn svg {
  width: 0.32rem; height: 0.32rem;
  fill: none; stroke: #fff; stroke-width: 1.8;
  filter: drop-shadow(0 0.02rem 0.04rem rgba(0, 0, 0, 0.4));
}
.viewer__rail-btn.is-liked svg {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.viewer__caption {
  position: absolute;
  left: 0.16rem;
  right: 1rem;
  bottom: 0.24rem;
  color: #fff;
  pointer-events: auto;
  text-shadow: 0 0.01rem 0.04rem rgba(0, 0, 0, 0.5);
}
.viewer__cap-name {
  display: flex; align-items: center; gap: 0.06rem;
  font-size: 0.16rem;
  font-weight: 700;
  margin-bottom: 0.06rem;
  cursor: pointer;
}
.viewer__cap-name .moment__mood {
  text-shadow: none;
}
.viewer__cap-text {
  font-size: 0.13rem;
  line-height: 1.45;
  margin-bottom: 0.1rem;
}
.viewer__chat-btn {
  display: inline-flex; align-items: center; gap: 0.06rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 0.01rem solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.12rem;
  font-weight: 700;
  padding: 0.06rem 0.12rem;
  border-radius: var(--radius-pill);
}
.viewer__chat-btn svg {
  width: 0.14rem; height: 0.14rem;
  stroke: #fff; stroke-width: 2; fill: none;
}

/* ========== Swipe Banner (Hero) ========== */
.swipe-banner {
  display: flex;
  align-items: center;
  gap: 0.14rem;
  width: calc(100% - 0.32rem);
  margin: 0.14rem 0.16rem 0.08rem;
  padding: 0.16rem 0.14rem 0.16rem 0.18rem;
  background: linear-gradient(135deg, #1f1a3a 0%, #3a1e57 55%, #6a1f50 100%);
  border-radius: 0.16rem;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #fff;
  box-shadow: 0 0.08rem 0.18rem rgba(26, 18, 50, 0.28);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease;
}
.swipe-banner:active { transform: scale(0.985); }

.swipe-banner__stack {
  flex-shrink: 0;
  position: relative;
  width: 0.96rem;
  height: 0.78rem;
}
.swipe-banner__thumb {
  position: absolute;
  left: 0.08rem;
  top: 0;
  width: 0.7rem;
  height: 0.7rem;
  object-fit: cover;
  border-radius: 0.12rem;
  border: 0.02rem solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.35);
}
.swipe-banner__thumb--1 {
  transform: translate(0.16rem, 0.06rem) rotate(6deg);
  z-index: 3;
}
.swipe-banner__thumb--2 {
  transform: translate(0.04rem, 0.02rem) rotate(-2deg);
  z-index: 2;
  opacity: 0.85;
}
.swipe-banner__thumb--3 {
  transform: translate(-0.04rem, -0.04rem) rotate(-10deg);
  z-index: 1;
  opacity: 0.55;
}

.swipe-banner__body {
  flex: 1;
  min-width: 0;
  padding-left: 0.04rem;
}
.swipe-banner__eyebrow {
  font-size: 0.11rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01rem;
}
.swipe-banner__title {
  font-size: 0.17rem;
  font-weight: 800;
  margin-top: 0.04rem;
  line-height: 1.2;
}
.swipe-banner__sub {
  font-size: 0.11rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.03rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swipe-banner__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 800;
  padding: 0.08rem 0.12rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.04rem 0.1rem rgba(255, 61, 119, 0.45);
}
.swipe-banner__cta svg {
  width: 0.12rem;
  height: 0.12rem;
  stroke: #fff;
  stroke-width: 2.6;
  fill: none;
}

/* ========== Guild chip (Explore header) ========== */
.guild-chip {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  margin: 0.04rem 0.16rem 0.04rem;
  padding: 0.05rem 0.1rem 0.05rem 0.06rem;
  background: rgba(122, 92, 255, 0.08);
  border: 0.01rem solid rgba(122, 92, 255, 0.18);
  border-radius: var(--radius-pill);
  font-size: 0.11rem;
  color: var(--color-text);
  width: fit-content;
  max-width: calc(100% - 0.32rem);
}
.guild-chip__emoji {
  font-size: 0.14rem;
  line-height: 1;
}
.guild-chip__name {
  font-weight: 700;
  color: var(--guild-color, #7a5cff);
}
.guild-chip__slogan {
  color: var(--color-text-muted);
  margin-left: 0.04rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========== Guild card (Me page) ========== */
.guild-card {
  margin: 0 0.16rem 0.16rem;
  padding: 0.14rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}
.guild-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0.04rem;
  background: var(--guild-color, #7a5cff);
}
.guild-card__head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding-left: 0.06rem;
}
.guild-card__emoji {
  font-size: 0.32rem;
  line-height: 1;
  filter: drop-shadow(0 0.02rem 0.04rem rgba(0,0,0,0.12));
}
.guild-card__head-text {
  flex: 1;
  min-width: 0;
}
.guild-card__name {
  font-size: 0.15rem;
  font-weight: 800;
  color: var(--color-text);
}
.guild-card__slogan {
  font-size: 0.11rem;
  color: var(--color-text-muted);
  margin-top: 0.03rem;
}
.guild-card__switch {
  margin-top: 0.12rem;
  padding-top: 0.1rem;
  border-top: 1px dashed var(--color-border);
  padding-left: 0.06rem;
}
.guild-card__switch-label {
  display: block;
  font-size: 0.1rem;
  color: var(--color-text-light);
  margin-bottom: 0.06rem;
  letter-spacing: 0.01rem;
}
.guild-card__switch-row {
  display: flex;
  gap: 0.06rem;
  flex-wrap: wrap;
}
.guild-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.05rem 0.1rem;
  font-size: 0.11rem;
  font-weight: 600;
  background: #f3f3f5;
  color: var(--color-text-muted);
  border: 0.01rem solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.guild-switch-btn.is-current {
  background: rgba(122, 92, 255, 0.12);
  color: var(--guild-color, #7a5cff);
  border-color: rgba(122, 92, 255, 0.3);
}

/* ========== Group Chat (Discover tab = Ⱥ��) ========== */
.group-chat {
  display: flex;
  flex-direction: column;
  margin: 0.04rem 0.16rem 0.2rem;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  height: calc(100vh - 1.7rem);
  height: calc(100dvh - 1.7rem);
}

.group-chat__head {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.12rem 0.14rem;
  border-bottom: 1px solid var(--color-border-soft);
  background: #fff;
}
.group-chat__title-wrap { flex: 1; min-width: 0; }
.group-chat__title {
  font-size: 0.16rem;
  font-weight: 800;
  color: var(--color-text);
}
.group-chat__meta {
  font-size: 0.11rem;
  color: var(--color-text-muted);
  margin-top: 0.02rem;
}
.group-chat__icon-btn {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #f3f3f5;
  color: var(--color-text-muted);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease;
}
.group-chat__icon-btn:active { background: #e7e7ea; }
.group-chat__icon-btn svg {
  width: 0.16rem;
  height: 0.16rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: currentColor;
}
.group-chat__icon-btn svg[fill="none"],
.group-chat__icon-btn .group-chat__fs-expand,
.group-chat__icon-btn .group-chat__fs-compress { fill: none; }
.group-chat__fs-compress { display: none; }
.group-chat.is-fullscreen .group-chat__fs-expand   { display: none; }
.group-chat.is-fullscreen .group-chat__fs-compress { display: block; }

/* Fullscreen state �� break out of <main>, cover the whole viewport */
.group-chat.is-fullscreen {
  position: fixed;
  top: 0; left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  border: none;
  z-index: 700;
}
.group-chat.is-fullscreen .group-chat__head {
  padding-top: calc(0.12rem + env(safe-area-inset-top));
}
.group-chat.is-fullscreen .group-chat__input-wrap {
  padding-bottom: calc(0.08rem + env(safe-area-inset-bottom));
}

.group-chat__pinned {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.08rem 0.12rem;
  background: linear-gradient(90deg, rgba(255, 61, 119, 0.08), rgba(122, 92, 255, 0.06));
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 0.12rem;
  color: var(--color-text);
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
.group-chat__pinned-emoji { font-size: 0.16rem; flex-shrink: 0; }
.group-chat__pinned-text  {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.group-chat__pinned-cta {
  flex-shrink: 0;
  font-size: 0.11rem;
  font-weight: 700;
  color: var(--color-accent);
}

.group-chat__messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.12rem 0.12rem 0.08rem;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gc-msg {
  display: flex;
  gap: 0.08rem;
  max-width: 88%;
}
.gc-msg--system {
  align-self: center;
  max-width: 80%;
}
.gc-msg--system .gc-msg__bubble {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-light);
  font-size: 0.11rem;
  padding: 0.04rem 0.1rem;
  border-radius: var(--radius-pill);
}
.gc-msg--module-entry { max-width: 92%; }
.gc-msg--module-entry .gc-msg__bubble {
  background: linear-gradient(135deg, rgba(122, 92, 255, 0.14) 0%, rgba(255, 96, 153, 0.10) 100%);
  color: var(--color-text);
  border: 1px solid rgba(122, 92, 255, 0.22);
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.06rem 0.12rem;
}
.gc-msg__module-badge {
  font-size: 0.095rem;
  font-weight: 800;
  letter-spacing: 0.02rem;
  padding: 0.02rem 0.06rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #7a5cff 0%, #ff6099 100%);
  color: #fff;
  line-height: 1.2;
}
.gc-msg--user {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.gc-msg__avatar {
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #e7e7ea;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.14rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.gc-msg__avatar img { width: 100%; height: 100%; object-fit: cover; }
.gc-msg__avatar--operator { background: linear-gradient(135deg, #ffb74c, #ff7a3d); }
.gc-msg__avatar--user     { background: linear-gradient(135deg, #b0b0b8, #6a6a72); }

.gc-msg__body { display: flex; flex-direction: column; gap: 0.03rem; min-width: 0; }
.gc-msg--user .gc-msg__body { align-items: flex-end; }

.gc-msg__name-row {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  font-size: 0.1rem;
  color: var(--color-text-muted);
}
.gc-msg__name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 0.11rem;
}
.gc-msg__role {
  font-size: 0.09rem;
  font-weight: 700;
  padding: 0.005rem 0.04rem;
  border-radius: 0.03rem;
  background: #fff7c4;
  color: #b6890a;
  letter-spacing: 0.005rem;
}
.gc-msg__role--operator { background: #ffe0b3; color: #b66200; }
.gc-msg__role--creator  { background: rgba(255, 61, 119, 0.12); color: var(--color-accent); }
.gc-msg__time { font-size: 0.09rem; color: var(--color-text-light); }

.gc-msg__bubble {
  padding: 0.07rem 0.11rem;
  background: #fff;
  border-radius: 0.1rem;
  font-size: 0.13rem;
  color: var(--color-text);
  line-height: 1.4;
  word-break: break-word;
  border: 1px solid var(--color-border-soft);
  max-width: 100%;
}
.gc-msg--user .gc-msg__bubble {
  background: var(--color-accent);
  color: #fff;
  border-color: transparent;
}
.gc-msg--operator .gc-msg__bubble {
  background: #fffbe6;
  border-color: #ffe69c;
}
.gc-msg--creator .gc-msg__bubble {
  background: #fff;
  border-color: rgba(255, 61, 119, 0.2);
}

/* Media bubbles (image/video) */
.gc-msg__bubble--media {
  padding: 0.04rem;
}
.gc-msg__media {
  display: block;
  max-width: 100%;
  max-height: 2.4rem;
  width: auto;
  height: auto;
  border-radius: 0.08rem;
  object-fit: cover;
  cursor: pointer;
  background: #f0f0f0;
}
.gc-msg__video {
  display: block;
  max-width: 100%;
  max-height: 2.6rem;
  border-radius: 0.08rem;
  background: #000;
}
.group-chat.is-fullscreen .gc-msg__media,
.group-chat.is-fullscreen .gc-msg__video {
  max-height: 3.6rem;
}

.group-chat__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.08rem 0.1rem;
  border-top: 1px solid var(--color-border-soft);
  background: #fff;
}
.group-chat__attach {
  flex-shrink: 0;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #f3f3f5;
  border: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}
.group-chat__attach:active { background: #e7e7ea; }
.group-chat__attach svg {
  width: 0.2rem;
  height: 0.2rem;
  stroke: currentColor;
  stroke-width: 1.8;
}

.group-chat__voice {
  flex-shrink: 0;
  width: 0.36rem;
  height: 0.36rem;
  border-radius: 50%;
  background: #f3f3f5;
  border: none;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.group-chat__voice:active,
.group-chat__voice.is-recording {
  background: var(--color-accent);
  color: #fff;
  transform: scale(1.05);
}
.group-chat__voice svg {
  width: 0.2rem;
  height: 0.2rem;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ========== Voice Recording Overlay ========== */
.voice-rec {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(20, 18, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
  pointer-events: none;
}
.voice-rec.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.voice-rec__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.14rem;
  padding: 0.24rem 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.16rem;
  color: #fff;
  min-width: 1.8rem;
}
.voice-rec__cancel-hint {
  font-size: 0.12rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 0.04rem 0.1rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.3);
  transition: background 0.15s ease, color 0.15s ease;
}
.voice-rec.is-canceling .voice-rec__cancel-hint {
  background: var(--color-live);
  color: #fff;
}
.voice-rec.is-canceling .voice-rec__cancel-hint::before {
  content: '�ɿ�ȡ�� �� ';
}
.voice-rec__mic {
  position: relative;
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.voice-rec.is-canceling .voice-rec__mic { background: var(--color-live); }
.voice-rec__mic svg {
  width: 0.32rem;
  height: 0.32rem;
  stroke: #fff;
  stroke-width: 1.8;
  fill: none;
  position: relative;
  z-index: 1;
}
.voice-rec__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
  animation: voicePulse 1.4s ease-out infinite;
}
@keyframes voicePulse {
  0%   { transform: scale(1);   opacity: 0.35; }
  100% { transform: scale(1.6); opacity: 0;    }
}
.voice-rec__time {
  font-size: 0.16rem;
  font-weight: 700;
  letter-spacing: 0.02rem;
  font-variant-numeric: tabular-nums;
}

/* ========== Audio bubble (voice message) ========== */
.gc-msg__bubble--audio {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.07rem 0.12rem;
  min-width: 1rem;
  cursor: pointer;
  user-select: none;
}
.gc-msg--user .gc-msg__bubble--audio { color: #fff; }
.gc-msg__audio-icon {
  flex-shrink: 0;
  width: 0.18rem;
  height: 0.18rem;
}
.gc-msg__audio-icon svg {
  width: 100%; height: 100%;
  fill: currentColor;
}
.gc-msg__audio-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.02rem;
  height: 0.16rem;
}
.gc-msg__audio-bars span {
  display: block;
  width: 0.02rem;
  background: currentColor;
  border-radius: 0.02rem;
  opacity: 0.7;
}
.gc-msg__bubble--audio.is-playing .gc-msg__audio-bars span {
  animation: audioBars 0.9s ease-in-out infinite;
}
@keyframes audioBars {
  0%, 100% { transform: scaleY(0.35); }
  50%      { transform: scaleY(1);    }
}
.gc-msg__audio-bars span:nth-child(2) { animation-delay: 0.08s; }
.gc-msg__audio-bars span:nth-child(3) { animation-delay: 0.16s; }
.gc-msg__audio-bars span:nth-child(4) { animation-delay: 0.24s; }
.gc-msg__audio-bars span:nth-child(5) { animation-delay: 0.32s; }
.gc-msg__audio-bars span:nth-child(6) { animation-delay: 0.40s; }
.gc-msg__audio-bars span:nth-child(7) { animation-delay: 0.48s; }
.gc-msg__audio-bars span:nth-child(8) { animation-delay: 0.56s; }
.gc-msg__audio-dur {
  flex-shrink: 0;
  font-size: 0.11rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}
.group-chat__input {
  flex: 1;
  height: 0.36rem;
  padding: 0 0.12rem;
  background: #f5f5f7;
  border: none;
  border-radius: var(--radius-pill);
  font-size: max(0.13rem, 16px);
  color: var(--color-text);
  outline: none;
}
.group-chat__input::placeholder { color: #b0b0b0; }
.group-chat__send {
  flex-shrink: 0;
  height: 0.36rem;
  padding: 0 0.16rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.13rem;
  font-weight: 700;
  cursor: pointer;
}
.group-chat__send:disabled { opacity: 0.5; cursor: default; }

/* ========== Studio (��������̨) ========== */
.app--studio {
  background: var(--color-bg-soft);
  padding-top: env(safe-area-inset-top);
}

.studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.1rem;
  padding: 0.14rem 0.16rem 0.08rem;
}
.studio-header__title {
  font-size: 0.22rem;
  font-weight: 800;
  color: var(--color-text);
}
.studio-header__guild {
  font-size: 0.11rem;
  font-weight: 700;
  padding: 0.05rem 0.12rem;
  background: rgba(122, 92, 255, 0.1);
  color: var(--guild-color, #7a5cff);
  border: none;
  border-radius: var(--radius-pill);
}

.studio-character {
  margin: 0 0.16rem 0.1rem;
  padding: 0.1rem 0.12rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.studio-character__label {
  display: block;
  font-size: 0.11rem;
  color: var(--color-text-muted);
  margin-bottom: 0.06rem;
}
.studio-character__picker {
  display: flex;
  gap: 0.06rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.02rem;
}
.studio-char-opt {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.04rem 0.1rem 0.04rem 0.04rem;
  background: #f3f3f5;
  border: 0.01rem solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.studio-char-opt.is-active {
  background: rgba(255, 61, 119, 0.1);
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.studio-char-opt__avatar {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  object-fit: cover;
}
.studio-char-opt__name {
  font-size: 0.12rem;
  font-weight: 700;
}

.studio-tabs {
  display: flex;
  gap: 0.04rem;
  padding: 0 0.16rem;
  margin-bottom: 0.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.studio-tabs::-webkit-scrollbar { display: none; }
.studio-tab {
  flex: 0 0 auto;
  padding: 0.06rem 0.1rem;
  background: #fff;
  border: 0.01rem solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.115rem;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  white-space: nowrap;
}
.studio-tab.is-active {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}
.studio-tab__count {
  display: inline-block;
  min-width: 0.16rem;
  height: 0.16rem;
  padding: 0 0.05rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  line-height: 0.16rem;
  text-align: center;
}

.studio-panel {
  padding: 0 0.16rem calc(var(--bottom-nav-height) + 0.3rem);
}

.studio-form {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 0.14rem;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.studio-form__label {
  font-size: 0.12rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.studio-form__textarea,
.studio-form__select,
.studio-form__input {
  width: 100%;
  padding: 0.08rem 0.1rem;
  background: #f7f7f9;
  border: 0.01rem solid transparent;
  border-radius: 0.08rem;
  font-size: 0.13rem;
  color: var(--color-text);
  outline: none;
  font-family: inherit;
  resize: vertical;
}
.studio-form__textarea:focus,
.studio-form__select:focus,
.studio-form__input:focus {
  background: #fff;
  border-color: var(--color-border);
}
.studio-form__row {
  display: flex;
  gap: 0.08rem;
}
.studio-form__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}
.studio-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06rem;
  align-items: center;
}
.studio-form__chips-label {
  width: 100%;
  font-size: 0.11rem;
  color: var(--color-text-muted);
}
.studio-form__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.1rem;
  font-size: 0.11rem;
  font-weight: 600;
  background: #f3f3f5;
  color: var(--color-text-muted);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.studio-form__chip input { accent-color: var(--color-accent); }
.studio-form__chip:has(input:checked) {
  background: rgba(255, 61, 119, 0.1);
  color: var(--color-accent);
}
.studio-form__submit {
  margin-top: 0.04rem;
  height: 0.42rem;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.14rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  cursor: pointer;
  box-shadow: 0 0.04rem 0.12rem rgba(255, 61, 119, 0.4);
}
.studio-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}
.studio-form__submit svg {
  width: 0.16rem;
  height: 0.16rem;
  stroke: #fff;
  stroke-width: 2.2;
}

.module-preview {
  margin-top: 0.06rem;
  padding: 0.12rem;
  background: #f7f5ff;
  border: 1px dashed rgba(122, 92, 255, 0.32);
  border-radius: 0.14rem;
}
.module-preview__label {
  font-size: 0.11rem;
  color: var(--color-text-light);
  margin-bottom: 0.08rem;
  letter-spacing: 0.02rem;
}
.module-preview .cp-module {
  box-shadow: 0 0.02rem 0.1rem rgba(122, 92, 255, 0.10);
}

.studio-drop {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #fafafa;
  border: 0.015rem dashed var(--color-border);
  border-radius: 0.1rem;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  padding: 0;
}
.studio-drop--multi { aspect-ratio: 16 / 7; }
.studio-drop__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.04rem;
  color: var(--color-text-muted);
  font-size: 0.12rem;
}
.studio-drop__icon {
  font-size: 0.32rem;
  line-height: 1;
  color: var(--color-text-light);
}
.studio-drop__hint {
  font-size: 0.1rem;
  color: var(--color-text-light);
}
.studio-drop__preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.studio-upload-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.06rem;
  margin-top: 0.04rem;
}
.studio-upload-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.08rem;
  overflow: hidden;
  background: #f0f0f0;
}
.studio-upload-item img,
.studio-upload-item video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.studio-upload-item__tag {
  position: absolute;
  bottom: 0.04rem; left: 0.04rem;
  font-size: 0.1rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.02rem 0.06rem;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(4px);
}
.studio-upload-item__spinner {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.11rem;
  font-weight: 700;
  color: var(--color-text-muted);
  gap: 0.06rem;
}
.studio-upload-item__spinner::before {
  content: '';
  width: 0.14rem;
  height: 0.14rem;
  border: 0.02rem solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: studioSpin 0.8s linear infinite;
}
@keyframes studioSpin { to { transform: rotate(360deg); } }

/* Queue */
.studio-queue {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.studio-queue-card {
  display: flex;
  gap: 0.1rem;
  padding: 0.1rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.studio-queue-card__thumb {
  flex-shrink: 0;
  width: 0.9rem;
  aspect-ratio: 3 / 4;
  background: #000;
  border-radius: 0.08rem;
  overflow: hidden;
  position: relative;
}
.studio-queue-card__thumb img,
.studio-queue-card__thumb video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.studio-queue-card__type {
  position: absolute;
  top: 0.04rem; left: 0.04rem;
  font-size: 0.09rem;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.02rem 0.06rem;
  border-radius: var(--radius-pill);
}
.studio-queue-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.04rem;
}
.studio-queue-card__meta {
  font-size: 0.1rem;
  color: var(--color-text-light);
  display: flex;
  gap: 0.06rem;
  flex-wrap: wrap;
}
.studio-queue-card__meta strong { color: var(--color-text); font-weight: 700; }
.studio-queue-card__prompt {
  font-size: 0.12rem;
  color: var(--color-text);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.studio-queue-card__tier {
  display: inline-block;
  font-size: 0.1rem;
  font-weight: 700;
  padding: 0.02rem 0.07rem;
  border-radius: var(--radius-pill);
  width: fit-content;
}
.studio-queue-card__tier--public        { background: #eaf3ff; color: #2b7be4; }
.studio-queue-card__tier--unlock_paid   { background: #fff0ea; color: #ff7a3d; }
.studio-queue-card__tier--intimacy_gated{ background: rgba(255, 61, 119, 0.12); color: var(--color-accent); }
.studio-queue-card__actions {
  display: flex;
  gap: 0.06rem;
  margin-top: auto;
}
.studio-queue-card__btn {
  flex: 1;
  height: 0.3rem;
  font-size: 0.12rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.studio-queue-card__btn--publish {
  background: var(--color-accent);
  color: #fff;
}
.studio-queue-card__btn--reject {
  background: #f3f3f5;
  color: var(--color-text-muted);
}
.studio-queue-card__spinner {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.1rem;
  gap: 0.06rem;
}
.studio-queue-card__spinner::before {
  content: '';
  width: 0.2rem;
  height: 0.2rem;
  border: 0.02rem solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: studioSpin 0.8s linear infinite;
}

/* ========== Private Chat (1:1) ========== */
.private-chat {
  position: fixed; top: 0; left: 50%; bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  height: 100vh; height: 100dvh;
  z-index: 450;
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateX(0.4rem);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s ease,
              visibility 0s linear 0.28s;
}
.private-chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateX(0);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.22s ease,
              visibility 0s linear 0s;
}

.private-chat__head {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: calc(0.1rem + env(safe-area-inset-top)) 0.14rem 0.1rem;
  background: #fff;
  border-bottom: 1px solid var(--color-border-soft);
}
.private-chat__back {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: #f3f3f5;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.private-chat__back svg {
  width: 0.16rem;
  height: 0.16rem;
  stroke: var(--color-text);
  stroke-width: 2.4;
  fill: none;
}
.private-chat__avatar {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #e7e7ea;
  cursor: pointer;
}
.private-chat__avatar:focus-visible {
  outline: 0.02rem solid var(--color-accent);
  outline-offset: 0.03rem;
}
.private-chat__title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.03rem;
}
.private-chat__name-row {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}
.private-chat__name {
  font-size: 0.15rem;
  font-weight: 800;
  color: var(--color-text);
}
.private-chat__online {
  width: 0.07rem;
  height: 0.07rem;
  background: var(--color-online);
  border-radius: 50%;
  box-shadow: 0 0 0 0.02rem rgba(46, 204, 113, 0.2);
}
.private-chat__intimacy {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}
.private-chat__intimacy-label {
  font-size: 0.1rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: 0.005rem;
}
.private-chat__intimacy-track {
  flex: 1;
  height: 0.04rem;
  background: #f0f0f2;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.private-chat__intimacy-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff3d77, #ff8a5b);
  border-radius: var(--radius-pill);
  transition: width 0.5s ease;
  width: 0;
}
.private-chat__gift {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: #fff7c4;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #b6890a;
}
.private-chat__gift svg {
  width: 0.18rem;
  height: 0.18rem;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
}

.private-chat__messages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.12rem 0.12rem 0.08rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  background: var(--color-bg-soft);
}

.private-chat__input-wrap {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.08rem 0.1rem calc(0.08rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--color-border-soft);
  background: #fff;
}
.gc-msg--pending .gc-msg__bubble {
  color: #7f7f88;
  font-style: italic;
}

/* Paid (locked) chat bubble */
.gc-msg__bubble--paid {
  display: inline-flex;
  align-items: center;
  gap: 0.06rem;
  cursor: pointer;
  background: linear-gradient(135deg, #fff0ea, #ffe0c4);
  border-color: #ffcd9c;
  color: #b66200;
  font-weight: 700;
}
.gc-msg__bubble--paid .gc-msg__paid-icon {
  display: inline-flex;
  width: 0.18rem;
  height: 0.18rem;
  align-items: center;
  justify-content: center;
}
.gc-msg__bubble--paid .gc-msg__paid-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.gc-msg__bubble--paid .gc-msg__paid-text {
  font-size: 0.13rem;
}

/* Typing indicator */
.gc-msg--typing .gc-msg__bubble {
  background: #fff;
  border: 1px solid var(--color-border-soft);
  padding: 0.1rem 0.14rem;
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
}
.gc-msg--typing .gc-msg__bubble span {
  width: 0.06rem;
  height: 0.06rem;
  background: var(--color-text-light);
  border-radius: 50%;
  animation: typingDot 1.2s ease-in-out infinite;
}
.gc-msg--typing .gc-msg__bubble span:nth-child(2) { animation-delay: 0.15s; }
.gc-msg--typing .gc-msg__bubble span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-0.03rem); }
}

/* Unread badge on bottom-nav Chat icon */
.nav-item__badge {
  position: absolute;
  top: 0.04rem;
  right: 50%;
  transform: translateX(0.16rem);
  min-width: 0.16rem;
  height: 0.16rem;
  padding: 0 0.04rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.09rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  border: 0.02rem solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.nav-item__badge[hidden] { display: none; }
.nav-item { position: relative; }

/* ========== Storyline (������) ========== */
.storyline-current {
  display: flex;
  gap: 0.12rem;
  padding: 0.12rem;
  background: linear-gradient(135deg, rgba(122,92,255,0.08), rgba(255,61,119,0.06));
  border: 0.01rem solid rgba(122,92,255,0.2);
  border-radius: 0.12rem;
}
.storyline-current__emoji {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 0.1rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.3rem;
}
.storyline-current__body { flex: 1; min-width: 0; }
.storyline-current__name {
  font-size: 0.15rem;
  font-weight: 800;
  color: var(--color-text);
}
.storyline-current__tagline {
  font-size: 0.11rem;
  color: var(--color-text-muted);
  margin-top: 0.02rem;
}
.storyline-current__persona {
  font-size: 0.115rem;
  color: var(--color-text);
  line-height: 1.5;
  margin-top: 0.08rem;
  padding: 0.06rem 0.08rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0.06rem;
}
.storyline-current__vibe {
  display: inline-block;
  margin-top: 0.06rem;
  font-size: 0.1rem;
  font-weight: 700;
  color: #7a5cff;
  padding: 0.02rem 0.08rem;
  background: rgba(122,92,255,0.12);
  border-radius: var(--radius-pill);
}

.storyline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.08rem;
}
.storyline-card {
  display: flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.08rem 0.1rem;
  background: #fafafa;
  border: 0.01rem solid var(--color-border);
  border-radius: 0.1rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
  min-width: 0;
  overflow: hidden;
}
.storyline-card:active { transform: scale(0.98); }
.storyline-card.is-current {
  background: rgba(255, 61, 119, 0.08);
  border-color: var(--color-accent);
}
.storyline-card__emoji {
  font-size: 0.24rem;
  line-height: 1;
  flex-shrink: 0;
}
.storyline-card__body { flex: 1 1 0; min-width: 0; overflow: hidden; }
.storyline-card__name {
  font-size: 0.12rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storyline-card__tagline {
  font-size: 0.1rem;
  color: var(--color-text-muted);
  margin-top: 0.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.storyline-card__badge {
  flex-shrink: 0;
  font-size: 0.09rem;
  font-weight: 700;
  color: #fff;
  padding: 0.02rem 0.06rem;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  letter-spacing: 0.01rem;
}
.storyline-current__triggers {
  margin-top: 0.08rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.04rem;
  align-items: center;
}
.storyline-current__trig-label {
  width: 100%;
  font-size: 0.1rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-top: 0.04rem;
}
.storyline-trig {
  display: inline-block;
  font-size: 0.1rem;
  padding: 0.015rem 0.06rem;
  border-radius: var(--radius-pill);
  background: #fff;
  border: 0.01rem solid var(--color-border);
  color: var(--color-text);
}
.storyline-trig--paid {
  background: rgba(255, 196, 0, 0.15);
  border-color: rgba(255, 196, 0, 0.45);
  color: #8a5a00;
}
.storyline-trig--gated {
  background: rgba(255, 61, 119, 0.1);
  border-color: rgba(255, 61, 119, 0.4);
  color: #b32154;
}

.studio-form__hint {
  font-size: 0.1rem;
  color: var(--color-text-light);
  line-height: 1.5;
}

/* ========== Human Takeover ========== */
.takeover-status {
  padding: 0.1rem 0.12rem;
  background: #fafafa;
  border-radius: 0.1rem;
  border: 0.01rem solid var(--color-border);
}
.takeover-status__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.takeover-status__label {
  font-size: 0.13rem;
  font-weight: 700;
  color: var(--color-text);
}
.takeover-toggle {
  padding: 0.04rem 0.12rem;
  font-size: 0.11rem;
  font-weight: 700;
  border: none;
  border-radius: var(--radius-pill);
  background: #d8d8dc;
  color: #fff;
  cursor: pointer;
}
.takeover-toggle.is-on {
  background: #1ea866;
  box-shadow: 0 0.04rem 0.1rem rgba(30, 168, 102, 0.3);
}
.takeover-status__hint {
  font-size: 0.1rem;
  color: var(--color-text-muted);
  margin-top: 0.04rem;
  line-height: 1.5;
}

.takeover-inbox {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  max-height: 1.8rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.takeover-inbox-item {
  display: flex;
  flex-direction: column;
  gap: 0.02rem;
  padding: 0.06rem 0.1rem;
  background: #f7f7f9;
  border-radius: 0.06rem;
  font-size: 0.11rem;
  color: var(--color-text);
  line-height: 1.4;
}
.takeover-inbox-item__text {
  word-break: break-word;
}
.takeover-inbox-item__time {
  font-size: 0.09rem;
  color: var(--color-text-light);
}
.takeover-inbox-empty {
  font-size: 0.11rem;
  color: var(--color-text-light);
  padding: 0.1rem;
  text-align: center;
}

/* ========== Human-sent bubble (������Ϣ) ========== */
.gc-msg__name-row .gc-msg__human-tag {
  display: inline-flex;
  align-items: center;
  font-size: 0.09rem;
  font-weight: 700;
  padding: 0.005rem 0.05rem;
  background: linear-gradient(135deg, #ffcd9c, #ffb380);
  color: #6b3a0a;
  border-radius: 0.03rem;
  margin-right: 0.04rem;
  letter-spacing: 0.005rem;
}
.gc-msg__name-row .gc-msg__human-tag::before {
  content: '? ';
  font-size: 0.085rem;
  margin-right: 0.01rem;
}

.gc-msg--creator.is-human .gc-msg__bubble:not(.gc-msg__bubble--paid):not(.gc-msg__bubble--media):not(.gc-msg__bubble--audio) {
  background: linear-gradient(135deg, #fff5e6, #ffe7c4);
  border-color: #f0c98a;
  color: #5a3a0a;
}
.gc-msg--creator.is-human .gc-msg__avatar img {
  box-shadow: 0 0 0 0.02rem #ffb380;
}

/* ========== Device-specific adjustments ========== */
@media (min-width: 768px) {
  body { background: #f5f5f5; }
  .app { box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.08); }
}

@media (max-width: 360px) {
  .tabs { gap: 0.18rem; }
  .section__title { font-size: 0.18rem; }
  .nav-item__label { font-size: 0.095rem; }
}

/* ========== AI Create (User-facing) ========== */
.app--create {
  background: var(--color-bg-soft);
  padding-top: env(safe-area-inset-top);
  padding-bottom: 1rem;
}
.create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.14rem 0.16rem 0.08rem;
}
.create-header__title {
  font-size: 0.22rem;
  font-weight: 800;
  color: var(--color-text);
}
.create-header__bal {
  display: inline-flex;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.1rem;
  background: linear-gradient(135deg, rgba(122,92,255,0.12), rgba(255,61,119,0.1));
  border-radius: var(--radius-pill);
  font-size: 0.12rem;
  font-weight: 800;
  color: #7a5cff;
}
.create-header__bal-icon {
  width: 0.14rem;
  height: 0.14rem;
  fill: none;
  stroke: #7a5cff;
  stroke-width: 1.8;
}

.create-modes {
  display: flex;
  gap: 0.04rem;
  margin: 0.04rem 0.16rem 0.12rem;
  padding: 0.04rem;
  background: rgba(122,92,255,0.06);
  border-radius: 0.14rem;
}
.create-mode {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  padding: 0.1rem 0.06rem;
  background: transparent;
  border: none;
  border-radius: 0.1rem;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.create-mode:active { transform: scale(0.98); }
.create-mode.is-active {
  background: #fff;
  box-shadow: 0 0.02rem 0.08rem rgba(122,92,255,0.18);
}
.create-mode__emoji {
  font-size: 0.18rem;
  line-height: 1;
}
.create-mode__label {
  font-size: 0.13rem;
  font-weight: 700;
  color: var(--color-text-light, #999);
  transition: color 0.18s;
}
.create-mode.is-active .create-mode__label {
  color: var(--color-text);
}
.create-mode__price {
  font-size: 0.1rem;
  font-weight: 600;
  color: #b6a8ff;
  transition: color 0.18s;
}
.create-mode.is-active .create-mode__price {
  color: #7a5cff;
}

.create-form {
  padding: 0.04rem 0.16rem 0.16rem;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.create-form[hidden] { display: none; }
.create-form__label {
  font-size: 0.13rem;
  font-weight: 800;
  color: var(--color-text);
  margin-top: 0.08rem;
}
.create-form__textarea {
  padding: 0.1rem 0.12rem;
  font-size: 0.13rem;
  border: 0.01rem solid var(--color-border);
  border-radius: 0.1rem;
  background: #fff;
  resize: none;
  font-family: inherit;
  color: var(--color-text);
  line-height: 1.5;
}
.create-form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
.create-form__tip {
  font-size: 0.1rem;
  color: var(--color-text-light);
  line-height: 1.5;
  margin-top: 0.04rem;
}

.create-drop {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border: 0.015rem dashed rgba(122,92,255,0.4);
  border-radius: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}
.create-drop:active { transform: scale(0.99); }
.create-drop__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.create-drop__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06rem;
  color: var(--color-text-muted);
}
.create-drop__plus {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff3d77, #7a5cff);
  color: #fff;
  font-size: 0.28rem;
  line-height: 0.4rem;
  text-align: center;
  font-weight: 300;
}
.create-drop__hint {
  font-size: 0.11rem;
  color: var(--color-text-muted);
}

.create-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.06rem;
}
.create-chip {
  padding: 0.05rem 0.12rem;
  font-size: 0.12rem;
  font-weight: 700;
  background: #fff;
  border: 0.01rem solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  cursor: pointer;
}
.create-chip.is-active {
  background: linear-gradient(135deg, #ff3d77, #7a5cff);
  color: #fff;
  border-color: transparent;
}

.create-submit {
  margin-top: 0.12rem;
  padding: 0.13rem 0.16rem;
  font-size: 0.14rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #ff3d77, #7a5cff);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  box-shadow: 0 0.06rem 0.2rem rgba(255, 61, 119, 0.3);
}
.create-submit:active { transform: scale(0.98); }
.create-submit.is-busy {
  opacity: 0.86;
  pointer-events: none;
}
.create-submit__spinner {
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  border: 0.02rem solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
.create-submit__cost {
  font-size: 0.11rem;
  font-weight: 700;
  padding: 0.02rem 0.08rem;
  background: rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
}

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

.create-works {
  padding: 0.1rem 0.16rem 0.2rem;
}
.create-works__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.create-works__title {
  font-size: 0.16rem;
  font-weight: 800;
  color: var(--color-text);
}
.create-works__count {
  font-size: 0.11rem;
  font-weight: 700;
  color: var(--color-text-muted);
}
.create-works__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
}
.create-works__empty {
  grid-column: 1 / -1;
  font-size: 0.12rem;
  color: var(--color-text-light);
  padding: 0.3rem 0.1rem;
  text-align: center;
  background: #fff;
  border-radius: 0.1rem;
}
/* Shared ������������ strip (i2i + i2v) */
.create-refcreator {
  margin: 0.08rem 0.12rem;
  padding: 0.1rem 0.1rem 0.08rem;
  background: linear-gradient(180deg, rgba(122,92,255,0.06) 0%, rgba(122,92,255,0.02) 100%);
  border: 0.01rem solid rgba(122,92,255,0.18);
  border-radius: 0.12rem;
}
.create-refcreator__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 0.04rem 0.06rem;
}
.create-refcreator__title {
  font-size: 0.13rem;
  font-weight: 700;
  color: var(--color-text);
}
.create-refcreator__hint {
  font-size: 0.1rem;
  color: var(--color-text-light, #999);
}
.create-refcreator__strip {
  display: flex;
  gap: 0.08rem;
  overflow-x: auto;
  padding: 0.02rem 0.04rem 0.04rem;
  scrollbar-width: none;
}
.create-refcreator__strip::-webkit-scrollbar { display: none; }
.create-refcreator__opt {
  flex: 0 0 auto;
  width: 0.52rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  padding: 0.04rem 0.02rem;
  background: transparent;
  border: none;
  cursor: pointer;
}
.create-refcreator__avatar,
.create-refcreator__none {
  width: 0.44rem;
  height: 0.44rem;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0.02rem solid transparent;
  background: #fff;
  font-size: 0.13rem;
  color: var(--color-text-light, #999);
  box-sizing: border-box;
  transition: border-color 0.15s, transform 0.15s;
}
.create-refcreator__opt.is-active .create-refcreator__avatar,
.create-refcreator__opt.is-active .create-refcreator__none {
  border-color: var(--color-primary, #7a5cff);
  transform: scale(1.04);
  box-shadow: 0 0.02rem 0.1rem rgba(122,92,255,0.28);
}
.create-refcreator__name {
  font-size: 0.1rem;
  color: var(--color-text);
  max-width: 0.52rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.create-refcreator__opt.is-active .create-refcreator__name {
  color: var(--color-primary, #7a5cff);
  font-weight: 700;
}
.create-refcreator__tip {
  margin: 0.02rem 0.04rem 0;
  font-size: 0.1rem;
  color: var(--color-primary, #7a5cff);
}

.create-work {
  position: relative;
  background: #fff;
  border-radius: 0.12rem;
  overflow: hidden;
  box-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.04);
  cursor: pointer;
}
.create-work__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.create-work__videobadge {
  position: absolute;
  top: 0.06rem;
  left: 0.06rem;
  width: 0.22rem;
  height: 0.22rem;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.create-work__meta {
  display: flex;
  align-items: center;
  gap: 0.06rem;
  padding: 0.06rem 0.08rem;
}
.create-work__emoji { font-size: 0.16rem; flex-shrink: 0; }
.create-work__body { flex: 1; min-width: 0; }
.create-work__title {
  font-size: 0.11rem;
  font-weight: 700;
  color: var(--color-text);
}
.create-work__sub {
  font-size: 0.09rem;
  color: var(--color-text-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.create-work__del {
  flex-shrink: 0;
  width: 0.2rem;
  height: 0.2rem;
  font-size: 0.16rem;
  line-height: 1;
  background: rgba(0,0,0,0.06);
  border: none;
  border-radius: 50%;
  color: var(--color-text-light);
  cursor: pointer;
}

/* ========== Me / Profile Page ========== */
.app--me {
  background: var(--color-bg-soft);
  padding-top: env(safe-area-inset-top);
}

.me-header {
  padding: 0.16rem 0.16rem 0.06rem;
  background: var(--color-bg-soft);
}
.me-header__title {
  font-size: 0.22rem;
  font-weight: 800;
  color: var(--color-text);
}

.me-card {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin: 0.06rem 0.16rem 0.16rem;
  padding: 0.16rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}
.me-card__avatar {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff8a5b, #ff3d77);
  color: #fff;
  font-size: 0.22rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.me-card__info { flex: 1; min-width: 0; }
.me-card__name {
  font-size: 0.16rem; font-weight: 700; color: var(--color-text);
}
.me-card__sub {
  font-size: 0.11rem; color: var(--color-text-muted); margin-top: 0.04rem;
}
.me-card__arrow {
  font-size: 0.2rem; color: var(--color-text-light); font-weight: 300;
}
.me-card__arrow svg {
  width: 0.22rem;
  height: 0.22rem;
  display: block;
}

.diamond-wallet {
  margin: 0 0.16rem 0.16rem;
  padding: 0.16rem;
  background: linear-gradient(135deg, #2b3a55, #1a2238);
  color: #fff;
  border-radius: var(--radius-card);
  box-shadow: 0 0.08rem 0.18rem rgba(26, 34, 56, 0.25);
}
.diamond-wallet__row {
  display: flex; align-items: center; justify-content: space-between;
}
.diamond-wallet__bal {
  display: flex; align-items: baseline; gap: 0.06rem;
}
.diamond-wallet__icon {
  width: 0.2rem; height: 0.2rem;
  fill: var(--color-diamond);
  stroke: var(--color-diamond);
  stroke-width: 1.6;
  align-self: center;
}
.diamond-wallet__num {
  font-size: 0.28rem;
  font-weight: 800;
  letter-spacing: 0.01rem;
  color: #fff;
}
.diamond-wallet__label {
  font-size: 0.12rem;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 0.04rem;
}
.diamond-wallet__topup {
  background: var(--color-diamond);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 700;
  padding: 0.07rem 0.16rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  box-shadow: 0 0.04rem 0.12rem rgba(76, 182, 255, 0.4);
}
.earn-card {
  margin-top: 0.14rem;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.1rem 0.12rem;
  background: rgba(255, 255, 255, 0.08);
  border: 0.01rem solid rgba(255, 255, 255, 0.1);
  border-radius: 0.12rem;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}
.earn-card:active { transform: scale(0.98); background: rgba(255, 255, 255, 0.14); }
.earn-card__emoji {
  font-size: 0.28rem;
  flex-shrink: 0;
  filter: drop-shadow(0 0.02rem 0.04rem rgba(0,0,0,0.25));
}
.earn-card__body { flex: 1; min-width: 0; text-align: left; }
.earn-card__title {
  font-size: 0.14rem; font-weight: 700; color: #fff;
}
.earn-card__sub {
  font-size: 0.11rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.02rem;
}
.earn-card__cta {
  font-size: 0.12rem;
  font-weight: 700;
  background: #ff3d77;
  color: #fff;
  padding: 0.06rem 0.14rem;
  border-radius: var(--radius-pill);
  box-shadow: 0 0.04rem 0.1rem rgba(255, 61, 119, 0.4);
}
.earn-card.is-done .earn-card__cta {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.6);
  box-shadow: none;
}

.me-list {
  margin: 0 0.16rem;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.me-list__item {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.14rem 0.16rem;
  border-bottom: 1px solid var(--color-border-soft);
  cursor: pointer;
  transition: background 0.15s ease;
}
.me-list__item:last-child { border-bottom: none; }
.me-list__item:active { background: #f7f7f9; }
.me-list__icon {
  font-size: 0.18rem;
  width: 0.24rem;
  height: 0.24rem;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.me-list__icon svg {
  width: 0.22rem;
  height: 0.22rem;
  display: block;
}
.me-list__label {
  flex: 1;
  font-size: 0.14rem;
  font-weight: 600;
  color: var(--color-text);
}
.me-list__val {
  font-size: 0.13rem;
  color: var(--color-text-muted);
}
.me-list__arrow {
  font-size: 0.18rem;
  color: var(--color-text-light);
  font-weight: 300;
  margin-left: 0.04rem;
}
.me-list__arrow svg {
  width: 0.2rem;
  height: 0.2rem;
  display: block;
}

/* ========== Card-Flip Game Overlay ========== */
.game-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 18, 30, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.game-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.game-modal {
  position: relative;
  width: calc(100% - 0.6rem);
  max-width: 3.4rem;
  padding: 0.28rem 0.2rem 0.2rem;
  background: linear-gradient(160deg, #2a1d4d 0%, #1a1535 100%);
  color: #fff;
  border-radius: 0.22rem;
  box-shadow: 0 0.12rem 0.32rem rgba(0, 0, 0, 0.4);
  transform: scale(0.92);
  opacity: 0;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.24s ease;
}
.game-overlay.is-open .game-modal {
  transform: scale(1);
  opacity: 1;
}

.game-modal__close {
  position: absolute;
  top: 0.08rem; right: 0.08rem;
  width: 0.32rem; height: 0.32rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
  border: none;
  cursor: pointer;
}
.game-modal__close svg {
  width: 0.14rem; height: 0.14rem;
  stroke: #fff; stroke-width: 2.4; fill: none;
}
.game-modal__head {
  text-align: center;
  margin-bottom: 0.18rem;
}
.game-modal__emoji {
  font-size: 0.36rem;
  margin-bottom: 0.04rem;
  filter: drop-shadow(0 0.04rem 0.08rem rgba(0,0,0,0.3));
}
.game-modal__title {
  font-size: 0.2rem;
  font-weight: 800;
  letter-spacing: 0.01rem;
  margin-bottom: 0.04rem;
}
.game-modal__sub {
  font-size: 0.12rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
}

.game-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.12rem;
  padding: 0.04rem 0;
}
.game-card {
  aspect-ratio: 3 / 4;
  perspective: 800px;
  cursor: pointer;
}
.game-card.is-disabled { cursor: default; }
.game-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.game-card.is-flipped .game-card__inner {
  transform: rotateY(180deg);
}
.game-card:not(.is-disabled):active .game-card__inner {
  transform: scale(0.96);
}
.game-card.is-flipped:not(.is-disabled):active .game-card__inner {
  transform: rotateY(180deg) scale(0.96);
}
.game-card__face {
  position: absolute;
  inset: 0;
  border-radius: 0.12rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 0.04rem 0.12rem rgba(0, 0, 0, 0.3);
}
.game-card__face--front {
  background: linear-gradient(155deg, #ff3d77 0%, #ff8a5b 100%);
  color: #fff;
}
.game-card__face--back {
  background: linear-gradient(155deg, #4cb6ff 0%, #2b7be4 100%);
  color: #fff;
  transform: rotateY(180deg);
  gap: 0.04rem;
}
.game-card.is-revealed .game-card__face--back {
  background: linear-gradient(155deg, #555 0%, #333 100%);
  opacity: 0.65;
}
.game-card__q {
  font-size: 0.42rem;
  font-weight: 800;
  text-shadow: 0 0.02rem 0.06rem rgba(0, 0, 0, 0.2);
}
.game-card__prize {
  font-size: 0.22rem;
  font-weight: 800;
}
.game-card__diamond {
  font-size: 0.16rem;
}
.game-card.is-winner .game-card__face--back {
  animation: winnerPulse 1.2s ease-in-out infinite;
}
@keyframes winnerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(76, 182, 255, 0.7); }
  50%      { box-shadow: 0 0 0 0.08rem rgba(76, 182, 255, 0); }
}

.game-modal__claim {
  display: block;
  width: 100%;
  margin-top: 0.16rem;
  padding: 0.12rem;
  background: #ff3d77;
  color: #fff;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.15rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 0.06rem 0.16rem rgba(255, 61, 119, 0.5);
}
.game-modal__claim[hidden] { display: none; }

/* ========== Creator Interaction Games ========== */
.interaction-overlay {
  position: fixed;
  inset: 0;
  z-index: 560;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background:
    linear-gradient(180deg, rgba(255, 61, 119, 0.08), rgba(255, 231, 238, 0.72)),
    rgba(26, 26, 31, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.interaction-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.interaction-panel {
  position: relative;
  width: 100%;
  max-width: 5.2rem;
  min-height: 100vh;
  max-height: 100vh;
  padding: calc(0.2rem + env(safe-area-inset-top)) 0.16rem calc(0.18rem + env(safe-area-inset-bottom));
  border-radius: 0;
  background: var(--color-bg);
  box-shadow: 0 0 0.28rem rgba(26, 26, 31, 0.16);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow-y: auto;
}
.interaction-overlay.is-open .interaction-panel { transform: translateY(0); }
.interaction-panel__close {
  position: absolute;
  top: 0.12rem;
  right: 0.12rem;
  width: 0.34rem;
  height: 0.34rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-arrow-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.interaction-panel__close svg {
  width: 0.15rem;
  height: 0.15rem;
  stroke: var(--color-text);
  stroke-width: 2.4;
  fill: none;
}
.interaction-panel__head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding-right: 0.42rem;
  margin-bottom: 0.18rem;
}
.interaction-panel__avatar {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  object-fit: cover;
  border: 0.02rem solid #fff;
  box-shadow: 0 0 0 0.015rem rgba(255, 61, 119, 0.28), 0 0.04rem 0.14rem rgba(255, 61, 119, 0.16);
}
.interaction-panel__title-wrap { min-width: 0; }
.interaction-panel__title {
  font-size: 0.18rem;
  font-weight: 850;
  color: var(--color-text);
}
.interaction-panel__sub {
  margin-top: 0.03rem;
  font-size: 0.12rem;
  color: var(--color-text-muted);
}
.interaction-games {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.08rem;
  margin-bottom: 0.14rem;
}
.interaction-game {
  min-width: 0;
  min-height: 0.88rem;
  padding: 0.08rem 0.05rem;
  border: 1px solid var(--color-border);
  border-radius: 0.12rem;
  background: var(--color-bg-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.02rem;
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}
.interaction-game.is-active {
  background: linear-gradient(135deg, rgba(255, 61, 119, 0.14), rgba(255, 231, 238, 0.9));
  border-color: rgba(255, 61, 119, 0.36);
  box-shadow: 0 0.06rem 0.18rem rgba(255, 61, 119, 0.14);
}
.interaction-game__emoji {
  width: 0.28rem;
  height: 0.28rem;
  font-size: 0;
  line-height: 1;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
}
.interaction-game__emoji::before {
  font-size: 0.26rem;
  line-height: 1;
  font-weight: 900;
}
.interaction-game:nth-child(1) .interaction-game__emoji::before { content: "\265C"; }
.interaction-game:nth-child(2) .interaction-game__emoji::before { content: "\2726"; }
.interaction-game:nth-child(3) .interaction-game__emoji::before { content: "\2660"; }
.interaction-game.is-active .interaction-game__emoji {
  color: var(--color-accent);
}
.interaction-game__name {
  max-width: 100%;
  font-size: 0.115rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interaction-game__sub {
  max-width: 100%;
  font-size: 0.095rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.interaction-game__price {
  font-size: 0.1rem;
  color: var(--color-accent);
  font-weight: 700;
}
.interaction-card,
.interaction-result {
  padding: 0.16rem;
  border-radius: var(--radius-card);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft);
}
.interaction-card__eyebrow,
.interaction-result__kicker {
  font-size: 0.115rem;
  color: var(--color-accent);
  font-weight: 800;
}
.interaction-card__title {
  margin-top: 0.06rem;
  font-size: 0.18rem;
  line-height: 1.35;
  color: var(--color-text);
}
.interaction-card__hint {
  margin-top: 0.12rem;
  font-size: 0.12rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}
.interaction-options {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  margin-top: 0.14rem;
}
.interaction-options--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.interaction-option {
  min-height: 0.44rem;
  padding: 0.1rem 0.12rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 0.12rem;
  background: #fff;
  font-size: 0.14rem;
  font-weight: 750;
  color: var(--color-text);
  text-align: left;
}
.interaction-options--grid .interaction-option {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}
.score-game {
  margin-top: 0.14rem;
  padding: 0.14rem;
  border-radius: 0.14rem;
  background: #fff;
  border: 1px solid var(--color-border-soft);
}
.score-game__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.12rem;
  font-size: 0.13rem;
  color: var(--color-text-muted);
}
.score-game__row strong {
  font-size: 0.3rem;
  line-height: 1;
  color: #ff3d77;
}
.score-game__range {
  width: 100%;
  accent-color: #ff3d77;
}
.tap-game__button {
  width: 1.46rem;
  height: 1.46rem;
  margin: 0.18rem auto 0.12rem;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #ff3d77 58%, #a226ff);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.12rem 0.26rem rgba(255, 61, 119, 0.34);
}
.tap-game__button span {
  font-size: 0.42rem;
  font-weight: 900;
  line-height: 1;
}
.tap-game__button small {
  margin-top: 0.04rem;
  font-size: 0.13rem;
  font-weight: 800;
}
.tap-game__button.is-running:active {
  transform: scale(0.94);
}
.tap-game__meta {
  display: flex;
  justify-content: center;
  gap: 0.14rem;
  font-size: 0.12rem;
  color: var(--color-text-muted);
}
.gesture-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem;
  margin-top: 0.14rem;
}
.gesture-btn {
  min-height: 0.78rem;
  border: 1px solid var(--color-border-soft);
  border-radius: 0.14rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.04rem;
}
.gesture-btn span {
  font-size: 0.28rem;
  line-height: 1;
}
.gesture-btn em {
  font-style: normal;
  font-size: 0.12rem;
  font-weight: 800;
  color: var(--color-text);
}
.prank-wheel {
  width: 1.48rem;
  height: 1.48rem;
  margin: 0.18rem auto 0;
  border: 0.08rem solid #1a1a1f;
  border-radius: 50%;
  background:
    conic-gradient(#ff3d77 0 60deg, #ffd15c 60deg 120deg, #7a5cff 120deg 180deg, #4cb6ff 180deg 240deg, #33c481 240deg 300deg, #ff8a5b 300deg 360deg);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.12rem 0.26rem rgba(0, 0, 0, 0.18);
}
.prank-wheel:active {
  transform: rotate(18deg) scale(0.96);
}
.prank-wheel span {
  font-size: 0.34rem;
  line-height: 1;
  filter: drop-shadow(0 0.02rem 0.04rem rgba(0, 0, 0, 0.35));
}
.prank-wheel em {
  margin-top: 0.04rem;
  padding: 0.04rem 0.1rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.38);
  font-style: normal;
  font-size: 0.12rem;
  font-weight: 900;
}
.claw-machine {
  position: relative;
  height: 4.12rem;
  margin-top: 0.14rem;
  border-radius: 0.18rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 50% 32%, rgba(255, 96, 153, 0.28), transparent 34%),
    linear-gradient(160deg, #2d2147 0%, #10141f 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 0.02rem rgba(255,255,255,0.08), 0 0.1rem 0.24rem rgba(20,18,30,0.16);
}
.claw-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.06rem;
  margin-top: 0.12rem;
}
.claw-status span {
  min-height: 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.68);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.095rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.claw-machine::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 0.22rem 0.22rem;
  opacity: 0.6;
}
.claw-machine__scan {
  position: absolute;
  z-index: 2;
  top: 0.86rem;
  bottom: 0.52rem;
  width: 0.02rem;
  background: linear-gradient(transparent, rgba(255, 209, 92, 0.95), transparent);
  box-shadow: 0 0 0.16rem rgba(255, 209, 92, 0.8);
  animation: clawScan 2.4s linear infinite;
  pointer-events: none;
}
.claw-machine__aim {
  position: absolute;
  z-index: 2;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 50%;
  width: 0.01rem;
  transform: translateX(-50%);
  background: linear-gradient(transparent, rgba(255,255,255,0.85), transparent);
  opacity: 0.6;
  pointer-events: none;
}
.claw-machine__aim::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.42rem;
  width: 0.38rem;
  height: 0.38rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255,209,92,0.8);
  border-radius: 50%;
  box-shadow: 0 0 0.12rem rgba(255,209,92,0.44);
}
@keyframes clawScan {
  from { left: 8%; opacity: 0.25; }
  50% { opacity: 1; }
  to { left: 92%; opacity: 0.25; }
}
.claw-machine__glass {
  position: absolute;
  inset: 0.08rem;
  border-radius: 0.14rem;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(115deg, rgba(255,255,255,0.16), transparent 28%, rgba(255,255,255,0.08) 54%, transparent 70%);
  pointer-events: none;
  z-index: 3;
}
.claw-machine__marquee {
  position: absolute;
  left: 0.14rem;
  right: 0.14rem;
  bottom: 0.1rem;
  height: 0.34rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.34);
  color: rgba(255,255,255,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.105rem;
  font-weight: 900;
  letter-spacing: 0.02rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.claw-machine__rail {
  position: absolute;
  top: 0.46rem;
  left: 0.18rem;
  right: 0.18rem;
  height: 0.06rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,209,92,0.5), rgba(255,255,255,0.12));
  box-shadow: 0 0 0.12rem rgba(255,209,92,0.22);
}
.claw-machine__carriage {
  position: absolute;
  z-index: 4;
  top: -0.1rem;
  left: 50%;
  width: 0.5rem;
  height: 1.08rem;
  transform: translateX(-50%);
  transition: left 0.04s linear;
}
.claw-machine__carriage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.08rem;
  width: 0.03rem;
  height: 0.56rem;
  transform: translateX(-50%);
  background: linear-gradient(#ffe7a3, rgba(255,255,255,0.35));
  border-radius: var(--radius-pill);
  transition: height 0.34s ease;
}
.claw-machine__carriage span {
  position: absolute;
  left: 50%;
  top: 0.58rem;
  width: 0.42rem;
  height: 0.28rem;
  transform: translateX(-50%);
  border: 0.04rem solid #ffe7a3;
  border-top: 0;
  border-radius: 0 0 0.18rem 0.18rem;
  filter: drop-shadow(0 0.04rem 0.08rem rgba(0,0,0,0.35));
  transition: top 0.34s ease;
}
.claw-machine__carriage span::before,
.claw-machine__carriage span::after {
  content: "";
  position: absolute;
  top: -0.02rem;
  width: 0.04rem;
  height: 0.28rem;
  background: #ffe7a3;
  border-radius: var(--radius-pill);
}
.claw-machine__carriage span::before {
  left: 0.04rem;
  transform: rotate(24deg);
}
.claw-machine__carriage span::after {
  right: 0.04rem;
  transform: rotate(-24deg);
}
.claw-machine__carriage.is-dropping::before { height: 1.7rem; }
.claw-machine__carriage.is-dropping span { top: 1.7rem; }
.claw-machine__carriage.is-slip span {
  animation: clawSlip 0.28s ease-in-out 2;
}
@keyframes clawSlip {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  50% { transform: translateX(-50%) rotate(9deg); }
}
.claw-machine__prizes {
  position: absolute;
  left: 0.1rem;
  right: 0.1rem;
  bottom: 0.54rem;
  height: 1.32rem;
}
.claw-prize {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.03rem;
  transition: transform 0.4s ease, opacity 0.4s ease;
  animation: prizeFloat 2.8s ease-in-out infinite;
}
.claw-prize--lane1 {
  animation-delay: -1.2s;
}
.claw-prize span {
  width: 0.56rem;
  height: 0.56rem;
  border-radius: 0.16rem;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.31rem;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16), 0 0.05rem 0.12rem rgba(0,0,0,0.24);
}
@keyframes prizeFloat {
  0%, 100% { margin-bottom: 0; }
  50% { margin-bottom: 0.08rem; }
}
.claw-prize em {
  font-style: normal;
  font-size: 0.095rem;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
}
.claw-prize.is-caught {
  transform: translate(-50%, -1.22rem) scale(0.82);
  opacity: 0.2;
}
.claw-controls {
  display: grid;
  grid-template-columns: 1fr 0.92rem;
  gap: 0.08rem;
  align-items: center;
}
.claw-controls .interaction-primary { margin-top: 0.14rem; }
.claw-controls span {
  margin-top: 0.14rem;
  min-height: 0.42rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  color: #ffd15c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.11rem;
  font-weight: 900;
}

.haunt-stage {
  margin-top: 0.14rem;
}
.haunt-scene {
  position: relative;
  height: 4.25rem;
  border-radius: 0.22rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(120, 20, 30, 0.18), transparent 30%),
    linear-gradient(180deg, #10141a, #050507);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0.5rem rgba(0,0,0,0.62), 0 0.18rem 0.42rem rgba(0,0,0,0.38);
}
.haunt-scene--hall {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 0.04rem, transparent 0.04rem 0.42rem),
    radial-gradient(circle at 50% 42%, rgba(160, 30, 35, 0.2), transparent 28%),
    linear-gradient(180deg, #171118, #050506);
}
.haunt-scene--mirror {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.12), transparent 22%, rgba(255,255,255,0.08) 48%, transparent 72%),
    radial-gradient(circle at 50% 42%, rgba(170, 200, 255, 0.12), transparent 30%),
    #080a10;
}
.haunt-scene--basement {
  background:
    radial-gradient(circle at 50% 80%, rgba(80, 110, 70, 0.16), transparent 28%),
    linear-gradient(180deg, #080b0a, #010202);
}
.haunt-scene--attic {
  background:
    repeating-linear-gradient(12deg, rgba(150,100,70,0.08) 0 0.08rem, transparent 0.08rem 0.28rem),
    radial-gradient(circle at 52% 34%, rgba(180, 30, 35, 0.2), transparent 24%),
    #080506;
}
.haunt-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: radial-gradient(circle at 50% 48%, transparent 0 22%, rgba(0,0,0,0.38) 46%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
}
.haunt-fog {
  position: absolute;
  inset: -20%;
  z-index: 2;
  background:
    radial-gradient(circle at 20% 70%, rgba(255,255,255,0.12), transparent 18%),
    radial-gradient(circle at 80% 55%, rgba(255,255,255,0.08), transparent 16%),
    radial-gradient(circle at 48% 88%, rgba(255,255,255,0.1), transparent 22%);
  filter: blur(0.08rem);
  animation: hauntFog 7s linear infinite;
}
@keyframes hauntFog {
  from { transform: translateX(-4%); }
  to { transform: translateX(4%); }
}
.haunt-flashlight {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: radial-gradient(circle at 52% 46%, rgba(255,255,210,0.32), rgba(255,255,180,0.08) 19%, transparent 36%);
  mix-blend-mode: screen;
  animation: flashlightShake 2.8s ease-in-out infinite;
}
@keyframes flashlightShake {
  0%, 100% { transform: translate(0,0); opacity: 0.82; }
  35% { transform: translate(-2%, 1%); opacity: 0.66; }
  70% { transform: translate(2%, -1%); opacity: 0.9; }
}
.haunt-door {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0.5rem;
  width: 1.25rem;
  height: 2.35rem;
  transform: translateX(-50%);
  border-radius: 0.62rem 0.62rem 0.04rem 0.04rem;
  background: linear-gradient(90deg, #140f12, #2b1b20 52%, #0a0809);
  box-shadow: 0 0 0 0.08rem rgba(0,0,0,0.35), inset 0 0 0.28rem rgba(0,0,0,0.78);
}
.haunt-depth {
  position: absolute;
  z-index: 1;
  inset: 0;
  perspective: 4rem;
}
.haunt-depth i {
  position: absolute;
  left: 50%;
  bottom: 0.6rem;
  width: 1.2rem;
  height: 2.2rem;
  transform: translateX(-50%) scale(var(--s, 1));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0.1rem;
}
.haunt-depth i:nth-child(1) { --s: 1.6; opacity: 0.28; }
.haunt-depth i:nth-child(2) { --s: 1.15; opacity: 0.38; }
.haunt-depth i:nth-child(3) { --s: 0.75; opacity: 0.52; }
.haunt-entity {
  position: absolute;
  z-index: 3;
  left: 52%;
  top: 1.25rem;
  width: 0.44rem;
  height: 1.1rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 0.28rem 0.28rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.04));
  opacity: 0.18;
  filter: blur(0.015rem);
}
.haunt-entity::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.2rem;
  width: 0.09rem;
  height: 0.035rem;
  transform: translateX(-50%);
  background: rgba(255, 40, 55, 0.75);
  box-shadow: -0.09rem 0 rgba(255,40,55,0.75), 0.09rem 0 rgba(255,40,55,0.75);
}
.haunt-title {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  top: 0.95rem;
  text-align: center;
  color: rgba(255,255,255,0.78);
  font-size: 0.18rem;
  font-weight: 950;
  letter-spacing: 0.04rem;
}
.haunt-hud {
  position: absolute;
  z-index: 7;
  left: 0.12rem;
  right: 0.12rem;
  top: 0.12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 0.06rem;
}
.haunt-hud span {
  min-height: 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.42);
  color: rgba(255,255,255,0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.105rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}
.haunt-caption,
.haunt-clues {
  position: absolute;
  z-index: 7;
  left: 0.12rem;
  right: 0.12rem;
  border-radius: 0.14rem;
  background: rgba(0,0,0,0.48);
  color: rgba(255,255,255,0.84);
  padding: 0.1rem 0.12rem;
  font-size: 0.12rem;
  line-height: 1.45;
  backdrop-filter: blur(8px);
}
.haunt-caption { bottom: 0.52rem; }
.haunt-clues {
  bottom: 0.12rem;
  color: #ffd15c;
  font-size: 0.105rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.haunt-scene.is-jump {
  animation: hauntJump 0.52s steps(2, end);
}
.haunt-scene.is-jump .haunt-entity {
  opacity: 0.95;
  transform: translateX(-50%) scale(2.5);
  top: 0.7rem;
}
@keyframes hauntJump {
  0%, 100% { filter: none; }
  20% { filter: contrast(2.2) brightness(1.6) hue-rotate(-18deg); transform: translateX(-0.06rem); }
  45% { filter: invert(1) contrast(2.4); transform: translateX(0.06rem); }
  70% { filter: contrast(2) brightness(0.7); transform: translateY(0.04rem); }
}
.haunt-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.06rem;
  margin-top: 0.1rem;
}
.haunt-actions .interaction-primary,
.haunt-actions .interaction-secondary {
  margin-top: 0;
  min-height: 0.38rem;
  padding: 0 0.06rem;
  font-size: 0.115rem;
}
.tarot-table {
  margin-top: 0.14rem;
  padding: 0.14rem;
  border-radius: 0.22rem;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 209, 92, 0.16), transparent 36%),
    linear-gradient(160deg, #241b3f, #11131d);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0.1rem 0.24rem rgba(20,18,30,0.14), inset 0 0 0.42rem rgba(255,209,92,0.07);
}
.tarot-orbit {
  position: relative;
  height: 0.86rem;
  margin-bottom: 0.1rem;
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,209,92,0.22), transparent 30%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
  overflow: hidden;
}
.tarot-orbit i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.56rem;
  height: 0.56rem;
  border: 1px solid rgba(255,209,92,0.42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tarot-orbit i:nth-child(2) {
  width: 1.08rem;
  height: 0.36rem;
  transform: translate(-50%, -50%) rotate(24deg);
}
.tarot-orbit i:nth-child(3) {
  width: 1.08rem;
  height: 0.36rem;
  transform: translate(-50%, -50%) rotate(-24deg);
}
.tarot-table::before {
  content: "";
  display: block;
  height: 0.52rem;
  margin-bottom: 0.12rem;
  border-radius: 0.16rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,209,92,0.24), transparent 34%),
    linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  opacity: 0.85;
}
.tarot-spread-labels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.08rem;
  margin-bottom: 0.1rem;
}
.tarot-spread-labels span {
  height: 0.26rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.74);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.105rem;
  font-weight: 800;
}
.tarot-deck {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.1rem;
}
.tarot-card {
  aspect-ratio: 0.68;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 0.12rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 34%),
    repeating-linear-gradient(45deg, rgba(255,209,92,0.18) 0 0.02rem, transparent 0.02rem 0.08rem),
    #2b2250;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  box-shadow: 0 0.06rem 0.16rem rgba(0,0,0,0.22), inset 0 0 0 1px rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  transition: transform 0.28s ease, background 0.28s ease;
}
.tarot-card:active { transform: translateY(0.02rem) scale(0.98); }
.tarot-card.is-picked {
  background: linear-gradient(160deg, #fff7d1, #f5d27a);
  color: #271b3e;
  transform: rotateY(180deg);
  box-shadow: 0 0.1rem 0.24rem rgba(245,210,122,0.26);
}
.tarot-card span {
  font-size: 0.25rem;
  font-weight: 900;
}
.tarot-card em {
  font-style: normal;
  font-size: 0.095rem;
  font-weight: 900;
  letter-spacing: 0.01rem;
}
.h5-arena {
  position: relative;
  height: 3.2rem;
  margin-top: 0.14rem;
  border-radius: 0.16rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    radial-gradient(circle at 50% 45%, rgba(255, 96, 153, 0.28), transparent 32%),
    #171723;
  touch-action: manipulation;
}
.h5-arena--range {
  background:
    linear-gradient(135deg, rgba(76, 182, 255, 0.2), rgba(255, 209, 92, 0.14)),
    #191923;
}
.h5-hud {
  position: absolute;
  z-index: 3;
  top: 0.1rem;
  left: 0.1rem;
  right: 0.1rem;
  display: flex;
  justify-content: space-between;
  gap: 0.06rem;
  pointer-events: none;
}
.h5-hud span {
  padding: 0.05rem 0.08rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 0.11rem;
  font-weight: 800;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.h5-creator {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: 0.86rem;
  height: 0.86rem;
  border: 0.04rem solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.08rem 0.22rem rgba(0, 0, 0, 0.36);
}
.h5-start {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0.18rem;
  transform: translateX(-50%);
  min-width: 1.18rem;
  height: 0.42rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: #fff;
  color: #171723;
  font-size: 0.14rem;
  font-weight: 900;
  box-shadow: 0 0.08rem 0.18rem rgba(0, 0, 0, 0.22);
}
.h5-target {
  position: absolute;
  z-index: 2;
  min-width: 0.46rem;
  min-height: 0.34rem;
  padding: 0.06rem 0.09rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: #ff3d77;
  color: #fff;
  font-size: 0.12rem;
  font-weight: 900;
  box-shadow: 0 0.06rem 0.14rem rgba(255, 61, 119, 0.35);
  animation: h5Pop 0.16s ease-out, h5Drift 1.35s linear forwards;
}
.h5-target.is-bomb {
  background: #1a1a1f;
  box-shadow: 0 0.06rem 0.14rem rgba(0, 0, 0, 0.3);
}
@keyframes h5Pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes h5Drift {
  to { transform: translateY(0.2rem) scale(0.92); opacity: 0.86; }
}
.card-table {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.12rem;
  margin: 0.16rem 0;
}
.mini-card {
  min-height: 1.08rem;
  border-radius: 0.12rem;
  background: #fff;
  border: 1px solid var(--color-border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.26rem;
  font-weight: 950;
  color: var(--color-text);
  box-shadow: 0 0.05rem 0.14rem rgba(0, 0, 0, 0.08);
}
.mini-card.is-back {
  background: linear-gradient(135deg, #7a5cff, #ff6099);
  color: #fff;
}
.mini-card .is-red { color: #ff3d77; }
.card-versus {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: #1a1a1f;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.12rem;
  font-weight: 950;
}
.blackjack-board {
  display: grid;
  gap: 0.1rem;
  margin-top: 0.14rem;
  padding: 0.14rem;
  border-radius: 0.18rem;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 61, 119, 0.16), transparent 38%),
    linear-gradient(160deg, #161a22, #0c0f15);
  border: 1px solid rgba(255,255,255,0.1);
}
.texas-pot {
  display: grid;
  grid-template-columns: 0.5rem 0.8rem 1fr;
  align-items: center;
  gap: 0.08rem;
  min-height: 0.42rem;
  padding: 0.08rem 0.1rem;
  border-radius: 0.14rem;
  background: rgba(255, 209, 92, 0.1);
  border: 1px solid rgba(255, 209, 92, 0.16);
}
.texas-pot span {
  color: rgba(255,255,255,0.68);
  font-size: 0.11rem;
  font-weight: 850;
}
.texas-pot b {
  color: #ffd15c;
  font-size: 0.22rem;
  line-height: 1;
  font-weight: 950;
}
.texas-pot em {
  min-width: 0;
  color: rgba(255,255,255,0.62);
  font-style: normal;
  font-size: 0.11rem;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.texas-log {
  min-height: 0.36rem;
  padding: 0.08rem 0.1rem;
  border-radius: 0.12rem;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.72);
  font-size: 0.115rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.texas-odds {
  position: relative;
  min-height: 0.36rem;
  padding: 0.08rem 0.1rem;
  border-radius: 0.12rem;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
  display: grid;
  grid-template-columns: 0.78rem 0.46rem 1fr;
  align-items: center;
  gap: 0.08rem;
}
.texas-odds span,
.texas-odds b {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.78);
  font-size: 0.11rem;
  font-weight: 900;
}
.texas-odds b { color: #ffd15c; font-size: 0.15rem; }
.texas-odds i {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg, rgba(255,96,153,0.45), rgba(255,209,92,0.35));
}
.texas-raise-panel {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.06rem;
  margin-top: 0.08rem;
}
.texas-raise-panel.is-open { display: grid; }
.texas-raise-panel button {
  min-height: 0.34rem;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.82);
  font-size: 0.11rem;
  font-weight: 850;
}
.blackjack-hand {
  display: grid;
  grid-template-columns: 0.5rem 1fr 0.42rem;
  align-items: center;
  gap: 0.08rem;
  padding: 0.1rem;
  border-radius: 0.14rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035);
}
.blackjack-hand--dealer {
  background: rgba(255, 61, 119, 0.1);
}
.blackjack-hand b {
  font-size: 0.13rem;
  color: rgba(255,255,255,0.78);
}
.blackjack-hand b small {
  display: block;
  margin-top: 0.02rem;
  color: #ffd15c;
  font-size: 0.105rem;
  font-weight: 900;
}
.blackjack-hand > span {
  font-size: 0.2rem;
  font-weight: 950;
  color: #ffd15c;
  text-align: center;
}
.blackjack-cards {
  display: flex;
  gap: 0.06rem;
  min-width: 0;
  overflow-x: auto;
}
.blackjack-cards .mini-card {
  min-width: 0.48rem;
  min-height: 0.66rem;
  font-size: 0.15rem;
  border-radius: 0.08rem;
  flex: 0 0 auto;
  background: linear-gradient(180deg, #fff, #f5f2eb);
}
.blackjack-cards .mini-card.is-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.16), transparent 30%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 0.02rem, transparent 0.02rem 0.06rem),
    linear-gradient(135deg, #7a5cff, #ff6099);
}
.blackjack-tip {
  margin-top: 0.1rem;
  min-height: 0.34rem;
  padding: 0.08rem 0.12rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 209, 92, 0.1);
  color: rgba(255,255,255,0.7);
  font-size: 0.115rem;
  font-weight: 800;
  display: flex;
  align-items: center;
}
.blackjack-dealer {
  position: relative;
  height: 2.25rem;
  margin-top: 0.12rem;
  border-radius: 0.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 209, 92, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.1);
}
.blackjack-dealer__halo {
  position: absolute;
  left: 50%;
  top: 0.18rem;
  width: 1.4rem;
  height: 0.5rem;
  transform: translateX(-50%);
  border: 1px solid rgba(255,209,92,0.38);
  border-radius: 50%;
  box-shadow: 0 0 0.24rem rgba(255,209,92,0.18);
}
.blackjack-dealer__speech {
  position: absolute;
  z-index: 4;
  left: 0.14rem;
  right: 0.14rem;
  bottom: 0.12rem;
  min-height: 0.34rem;
  padding: 0.08rem 0.12rem;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.36);
  color: rgba(255,255,255,0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.12rem;
  font-weight: 850;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dealer-rig {
  position: absolute;
  left: 50%;
  top: 0.22rem;
  width: 1.9rem;
  height: 1.58rem;
  transform: translateX(-50%);
}
.dealer-rig__head {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0.08rem;
  width: 0.46rem;
  height: 0.58rem;
  transform: translateX(-50%);
  border-radius: 48% 48% 46% 46%;
  overflow: hidden;
  background:
    radial-gradient(circle at 36% 43%, #3a253f 0 0.018rem, transparent 0.02rem),
    radial-gradient(circle at 64% 43%, #3a253f 0 0.018rem, transparent 0.02rem),
    linear-gradient(180deg, #ffd6c7, #eaa28f);
  border: 0.018rem solid rgba(255,255,255,0.66);
  box-shadow: 0 0.06rem 0.18rem rgba(0,0,0,0.32), 0 0 0.18rem rgba(255,96,153,0.26);
}
.dealer-rig__head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.38rem;
  width: 0.14rem;
  height: 0.035rem;
  transform: translateX(-50%);
  border-radius: 0 0 0.12rem 0.12rem;
  background: rgba(185, 65, 94, 0.72);
}
.dealer-rig__hair {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: 0.74rem;
  height: 0.9rem;
  transform: translateX(-50%);
  border-radius: 0.42rem 0.42rem 0.32rem 0.32rem;
  background:
    radial-gradient(circle at 26% 26%, rgba(255,255,255,0.14), transparent 18%),
    linear-gradient(160deg, #211323, #07040a);
  box-shadow: 0 0.08rem 0.18rem rgba(0,0,0,0.34);
}
.dealer-rig__neck,
.dealer-rig__torso {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(#ffe7a3, rgba(255,255,255,0.5));
  border-radius: var(--radius-pill);
}
.dealer-rig__neck {
  top: 0.63rem;
  width: 0.05rem;
  height: 0.18rem;
}
.dealer-rig__torso {
  top: 0.78rem;
  width: 0.34rem;
  height: 0.58rem;
  border-radius: 0.16rem 0.16rem 0.08rem 0.08rem;
  background:
    radial-gradient(circle at 50% 0.08rem, rgba(255,214,199,0.85), transparent 0.12rem),
    linear-gradient(180deg, #ff6099, #51264e);
  box-shadow: -0.32rem 0.06rem 0 -0.1rem rgba(255,231,163,0.75), 0.32rem 0.06rem 0 -0.1rem rgba(255,231,163,0.75);
}
.dealer-rig__waist {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 1.22rem;
  width: 0.62rem;
  height: 0.28rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 0.18rem 0.18rem;
  background: linear-gradient(180deg, #5b2a5c, #17101e);
}
.dealer-rig__arm {
  position: absolute;
  top: 0.78rem;
  width: 0.74rem;
  height: 0.42rem;
  transform-origin: top center;
}
.dealer-rig__arm i,
.dealer-rig__arm b {
  position: absolute;
  height: 0.055rem;
  background: #ffe7a3;
  border-radius: var(--radius-pill);
  box-shadow: 0 0 0.08rem rgba(255,231,163,0.22);
}
.dealer-rig__arm i {
  width: 0.38rem;
  top: 0.02rem;
}
.dealer-rig__arm b {
  width: 0.34rem;
  top: 0.2rem;
}
.dealer-rig__arm--left {
  left: 0.25rem;
  transform: rotate(24deg);
}
.dealer-rig__arm--left i { right: 0.25rem; transform: rotate(18deg); }
.dealer-rig__arm--left b { right: 0.02rem; transform: rotate(-26deg); }
.dealer-rig__arm--right {
  right: 0.25rem;
  transform: rotate(-24deg);
}
.dealer-rig__arm--right i { left: 0.25rem; transform: rotate(-18deg); }
.dealer-rig__arm--right b { left: 0.02rem; transform: rotate(26deg); }
.dealer-rig__deck {
  position: absolute;
  z-index: 2;
  right: 0.22rem;
  top: 1.04rem;
  width: 0.36rem;
  height: 0.5rem;
  border-radius: 0.06rem;
  background: linear-gradient(135deg, #7a5cff, #ff6099);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.16rem;
  font-weight: 950;
  box-shadow: 0 0.05rem 0.14rem rgba(0,0,0,0.28);
}
.dealer-card-flight {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 0.48rem;
  width: 0.36rem;
  height: 0.5rem;
  border-radius: 0.055rem;
  background:
    radial-gradient(circle at 50% 50%, rgba(218, 163, 80, 0.42), transparent 0.09rem),
    linear-gradient(90deg, transparent 0 0.04rem, rgba(255,255,255,0.1) 0.04rem 0.055rem, transparent 0.055rem),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.08) 0 0.012rem, transparent 0.012rem 0.04rem),
    linear-gradient(135deg, #111827, #202743 52%, #5d2243);
  border: 1px solid rgba(255, 231, 178, 0.62);
  color: #dca75a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.15rem;
  font-weight: 950;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0.06rem 0.16rem rgba(0,0,0,0.42);
  transform: translateX(-50%);
}
.dealer-card-flight::before,
.dealer-card-flight::after,
.dealer-card-flight span {
  content: "";
  position: absolute;
  inset: 0.045rem;
  border-radius: 0.035rem;
  border: 1px solid rgba(218, 163, 80, 0.46);
}
.dealer-card-flight::after {
  inset: 0.11rem 0.085rem;
  border-color: rgba(255,255,255,0.18);
}
.dealer-card-flight span {
  inset: auto;
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 231, 178, 0.95), rgba(139, 83, 38, 0.28));
  border: 0;
}
.dealer-card-flight.is-flying.is-to-user {
  animation: dealerCardToUser 0.64s cubic-bezier(0.16, 0.82, 0.22, 1);
}
.dealer-card-flight.is-flying.is-to-dealer {
  animation: dealerCardToDealer 0.64s cubic-bezier(0.16, 0.82, 0.22, 1);
}
.dealer-card-flight.is-flying.is-to-board {
  animation: dealerCardToBoard 0.64s cubic-bezier(0.16, 0.82, 0.22, 1);
}
@keyframes dealerCardToUser {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(0.88); }
  12% { opacity: 1; }
  72% { opacity: 1; transform: translate(calc(-50% - 1.05rem), 0.42rem) rotate(-9deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% - 1.22rem), 0.5rem) rotate(-10deg) scale(1); }
}
@keyframes dealerCardToDealer {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(0.88); }
  12% { opacity: 1; }
  72% { opacity: 1; transform: translate(calc(-50% + 1.03rem), 0.42rem) rotate(8deg) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + 1.18rem), 0.5rem) rotate(9deg) scale(1); }
}
@keyframes dealerCardToBoard {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(0deg) scale(0.88); }
  12% { opacity: 1; }
  72% { opacity: 1; transform: translate(-50%, 0.54rem) rotate(2deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 0.64rem) rotate(2deg) scale(1); }
}
.blackjack-dealer.is-dealing .dealer-rig__arm--right,
.blackjack-dealer.is-hit .dealer-rig__arm--right {
  animation: dealerRightDeal 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blackjack-dealer.is-stand .dealer-rig__arm--left {
  animation: dealerLeftReveal 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.blackjack-dealer.is-dealing .dealer-rig__head,
.blackjack-dealer.is-hit .dealer-rig__head,
.blackjack-dealer.is-stand .dealer-rig__head {
  animation: dealerHeadNod 0.72s ease;
}
@keyframes dealerRightDeal {
  0%, 100% { transform: rotate(-24deg); }
  45% { transform: rotate(-62deg) translate(-0.1rem, 0.08rem); }
}
@keyframes dealerLeftReveal {
  0%, 100% { transform: rotate(24deg); }
  45% { transform: rotate(58deg) translate(0.12rem, 0.06rem); }
}
@keyframes dealerHeadNod {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  45% { transform: translateX(-50%) translateY(0.035rem); }
}
.blackjack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.08rem;
  margin-top: 0.12rem;
}
.texas-shell {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 209, 92, 0.16), transparent 0.95rem),
    linear-gradient(180deg, rgba(22, 23, 31, 0.98), rgba(9, 10, 15, 0.98));
  border-color: rgba(255, 209, 92, 0.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0.22rem 0.8rem rgba(0,0,0,0.36);
}
.texas-rule-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.06rem;
  margin-top: 0.1rem;
}
.texas-rule-strip span {
  min-height: 0.34rem;
  padding: 0 0.08rem;
  border-radius: 0.08rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.72);
  font-size: 0.105rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.texas-dealer {
  height: 2.42rem;
  border-radius: 0.14rem;
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 209, 92, 0.26), transparent 0.92rem),
    radial-gradient(circle at 18% 38%, rgba(112, 92, 255, 0.22), transparent 0.72rem),
    linear-gradient(180deg, #242731, #10131b 58%, #090b10);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0.12rem 0.42rem rgba(0,0,0,0.32);
}
.texas-dealer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,0.04) 9.4% 9.8%, transparent 10.2% 19%),
    radial-gradient(ellipse at 50% 110%, rgba(8, 83, 62, 0.86) 0 49%, transparent 50%);
  opacity: 0.8;
}
.texas-dealer__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.texas-dealer__art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 17%;
  filter: contrast(1.06) saturate(1.02) brightness(0.96);
  transform: scale(1.08);
}
.texas-dealer::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.02) 0 48%, rgba(0,0,0,0.24) 72%, rgba(4,5,8,0.7) 100%),
    radial-gradient(circle at 50% 18%, transparent 0 46%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.texas-dealer__backdrop i {
  position: absolute;
  top: 0.18rem;
  width: 0.07rem;
  height: 1.15rem;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,209,92,0.68), rgba(255,96,153,0));
  filter: blur(0.5px);
}
.texas-dealer__backdrop i:nth-child(1) { left: 22%; transform: rotate(16deg); }
.texas-dealer__backdrop i:nth-child(2) { left: 50%; height: 1.36rem; transform: translateX(-50%); }
.texas-dealer__backdrop i:nth-child(3) { right: 22%; transform: rotate(-16deg); }
.texas-dealer .blackjack-dealer__speech {
  z-index: 7;
  left: 0.18rem;
  right: 0.18rem;
  bottom: 0.12rem;
  border-radius: 0.1rem;
  background: rgba(4, 6, 10, 0.68);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 0.1rem 0.28rem rgba(0,0,0,0.28);
}
.texas-dealer .dealer-rig {
  display: none;
  top: 0.08rem;
  width: 2.8rem;
  height: 2.08rem;
}
.texas-dealer .dealer-rig__hair {
  z-index: 5;
  top: 0.01rem;
  width: 0.96rem;
  height: 1rem;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(ellipse at 34% 18%, rgba(255,255,255,0.42), transparent 0.16rem),
    linear-gradient(135deg, rgba(215,210,204,0.95), rgba(108,101,103,0.96) 48%, rgba(21,19,24,0.98));
  box-shadow:
    inset -0.16rem -0.08rem 0.18rem rgba(20,18,22,0.62),
    0 0.08rem 0.2rem rgba(0,0,0,0.36);
}
.texas-dealer .dealer-rig__hair::before,
.texas-dealer .dealer-rig__hair::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  width: 0.34rem;
  height: 0.82rem;
  border-radius: 0.24rem 0.24rem 0.3rem 0.3rem;
  background: linear-gradient(150deg, rgba(188,181,174,0.92), rgba(34,30,36,0.96) 72%);
}
.texas-dealer .dealer-rig__hair::before {
  left: -0.04rem;
  transform: rotate(16deg);
}
.texas-dealer .dealer-rig__hair::after {
  right: -0.04rem;
  transform: rotate(-16deg);
}
.texas-dealer .dealer-rig__head {
  z-index: 6;
  top: 0.2rem;
  width: 0.48rem;
  height: 0.6rem;
  border-radius: 48% 48% 44% 44%;
  background:
    linear-gradient(180deg, rgba(255,226,216,0.9), rgba(210,140,132,0.62));
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow:
    inset 0 -0.08rem 0.12rem rgba(72, 35, 46, 0.18),
    0 0.08rem 0.22rem rgba(0,0,0,0.36);
}
.texas-dealer .dealer-rig__head::before {
  display: none;
}
.texas-dealer .dealer-rig__neck {
  z-index: 3;
  top: 0.72rem;
  width: 0.14rem;
  height: 0.2rem;
  background: linear-gradient(#efb8a5, #c66a7d);
}
.dealer-rig__collar,
.dealer-rig__bow,
.dealer-rig__shirt,
.dealer-rig__vest-line,
.dealer-rig__buttons,
.dealer-rig__chip {
  position: absolute;
  left: 50%;
}
.dealer-rig__shirt {
  z-index: 2;
  top: 0.84rem;
  width: 0.78rem;
  height: 0.78rem;
  transform: translateX(-50%);
  border-radius: 0.22rem 0.22rem 0.08rem 0.08rem;
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(210,215,222,0.9) 49% 51%, transparent 52%),
    linear-gradient(180deg, rgba(255,255,255,0.92), rgba(220,225,232,0.78));
  box-shadow: 0 0.04rem 0.12rem rgba(0,0,0,0.18);
}
.dealer-rig__collar {
  z-index: 7;
  top: 0.82rem;
  width: 0.48rem;
  height: 0.18rem;
  transform: translateX(-50%);
}
.dealer-rig__collar::before,
.dealer-rig__collar::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.26rem;
  height: 0.16rem;
  background: #fff;
  border-radius: 0.02rem 0.02rem 0.09rem 0.02rem;
  box-shadow: 0 0.02rem 0.04rem rgba(0,0,0,0.18);
}
.dealer-rig__collar::before {
  left: 0.02rem;
  transform: rotate(22deg);
}
.dealer-rig__collar::after {
  right: 0.02rem;
  transform: rotate(-22deg) scaleX(-1);
}
.dealer-rig__bow {
  z-index: 8;
  top: 0.88rem;
  width: 0.38rem;
  height: 0.16rem;
  transform: translateX(-50%);
}
.dealer-rig__bow::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.045rem;
  width: 0.075rem;
  height: 0.075rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #06070b;
  z-index: 2;
}
.dealer-rig__bow i {
  position: absolute;
  top: 0.01rem;
  width: 0.18rem;
  height: 0.14rem;
  background: linear-gradient(145deg, #1d1e26, #030306);
  border-radius: 0.02rem 0.11rem 0.11rem 0.02rem;
}
.dealer-rig__bow i:first-child {
  left: 0;
  transform: skewY(12deg);
}
.dealer-rig__bow i:last-child {
  right: 0;
  transform: scaleX(-1) skewY(12deg);
}
.texas-dealer .dealer-rig__torso {
  z-index: 3;
  top: 0.88rem;
  width: 1.34rem;
  height: 0.92rem;
  border-radius: 46% 46% 0.14rem 0.14rem / 24% 24% 0.12rem 0.12rem;
  background:
    radial-gradient(ellipse at 34% 38%, rgba(255,255,255,0.09), transparent 0.16rem),
    radial-gradient(ellipse at 66% 38%, rgba(255,255,255,0.09), transparent 0.16rem),
    linear-gradient(112deg, transparent 0 22%, rgba(15,16,22,0.98) 23% 47%, transparent 48%),
    linear-gradient(248deg, transparent 0 22%, rgba(15,16,22,0.98) 23% 47%, transparent 48%),
    linear-gradient(180deg, rgba(38,39,49,0.98), rgba(6,7,11,0.98) 82%);
  box-shadow:
    0 0.08rem 0.22rem rgba(0,0,0,0.42);
}
.texas-dealer .dealer-rig__torso::before,
.texas-dealer .dealer-rig__torso::after {
  content: "";
  position: absolute;
  top: 0.12rem;
  width: 0.28rem;
  height: 0.62rem;
  border: 1px solid rgba(255,255,255,0.24);
  border-top: 0;
  border-bottom: 0;
}
.texas-dealer .dealer-rig__torso::before {
  left: 0.13rem;
  border-right: 0;
  border-radius: 0.3rem 0 0 0.22rem;
  transform: rotate(-14deg);
}
.texas-dealer .dealer-rig__torso::after {
  right: 0.13rem;
  border-left: 0;
  border-radius: 0 0.3rem 0.22rem 0;
  transform: rotate(14deg);
}
.dealer-rig__vest-line {
  z-index: 7;
  top: 0.96rem;
  width: 0.012rem;
  height: 0.58rem;
  background: rgba(255,255,255,0.18);
  transform-origin: top center;
}
.dealer-rig__vest-line--left {
  transform: translateX(-0.2rem) rotate(17deg);
}
.dealer-rig__vest-line--right {
  transform: translateX(0.2rem) rotate(-17deg);
}
.dealer-rig__buttons {
  z-index: 8;
  top: 1.08rem;
  width: 0.08rem;
  height: 0.36rem;
  transform: translateX(-50%);
}
.dealer-rig__buttons i {
  display: block;
  width: 0.036rem;
  height: 0.036rem;
  margin: 0 0 0.07rem 0.02rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.72);
  box-shadow: 0 0.01rem 0.03rem rgba(0,0,0,0.28);
}
.texas-dealer .dealer-rig__waist {
  z-index: 4;
  top: 1.56rem;
  width: 1.34rem;
  height: 0.3rem;
  background: linear-gradient(180deg, #171923, #050609);
}
.texas-dealer .dealer-rig__arm {
  z-index: 1;
  top: 1.02rem;
  width: 1.12rem;
  height: 0.62rem;
}
.texas-dealer .dealer-rig__arm i,
.texas-dealer .dealer-rig__arm b {
  height: 0.13rem;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.82), rgba(222,226,232,0.92));
  border-radius: 0.12rem;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 -0.02rem 0.04rem rgba(0,0,0,0.12);
}
.texas-dealer .dealer-rig__arm i {
  width: 0.56rem;
}
.texas-dealer .dealer-rig__arm b {
  width: 0.48rem;
}
.texas-dealer .dealer-rig__arm--left {
  left: 0.16rem;
  top: 1.08rem;
  transform: rotate(18deg);
}
.texas-dealer .dealer-rig__arm--left i { right: 0.34rem; transform: rotate(8deg); }
.texas-dealer .dealer-rig__arm--left b { right: 0; top: 0.18rem; transform: rotate(-10deg); }
.texas-dealer .dealer-rig__arm--right {
  right: 0.1rem;
  top: 0.7rem;
  transform: rotate(-46deg);
}
.texas-dealer .dealer-rig__arm--right i { left: 0.28rem; transform: rotate(-18deg); }
.texas-dealer .dealer-rig__arm--right b { left: 0.02rem; top: 0.24rem; transform: rotate(50deg); }
.dealer-rig__chip {
  z-index: 9;
  top: 0.72rem;
  right: 0.34rem;
  left: auto;
  width: 0.16rem;
  height: 0.16rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f3f7ff 0 34%, #83a8c9 35% 56%, #172538 57%);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 0.03rem 0.1rem rgba(0,0,0,0.32);
}
.texas-dealer .dealer-rig__deck {
  z-index: 8;
  right: 0.5rem;
  top: 1.34rem;
  width: 0.42rem;
  height: 0.58rem;
  border: 1px solid rgba(255,255,255,0.55);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18), transparent 24%),
    linear-gradient(135deg, #2d214c, #d93c7c);
}
.texas-table-rim {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: -0.04rem;
  width: 4.35rem;
  height: 1.12rem;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(21, 111, 79, 0.98), rgba(6, 61, 47, 0.98) 58%, rgba(3, 21, 18, 0.98) 59%),
    linear-gradient(180deg, #0d624a, #05221c);
  border: 0.026rem solid rgba(176, 112, 49, 0.74);
  opacity: 0.95;
  box-shadow:
    inset 0 0.1rem 0.2rem rgba(255,255,255,0.08),
    inset 0 -0.16rem 0.18rem rgba(10, 5, 3, 0.62),
    0 -0.06rem 0.2rem rgba(0,0,0,0.45);
  cursor: pointer;
}
.texas-table-rim span {
  display: none;
  position: absolute;
  top: 0.52rem;
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd15c 0 32%, #b65165 33% 62%, #2a1933 63%);
}
.texas-table-rim span:nth-child(1) { left: 1rem; }
.texas-table-rim span:nth-child(2) { left: 2rem; }
.texas-table-rim span:nth-child(3) { right: 1rem; }
.texas-shuffle {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 0.42rem;
  width: 0.74rem;
  height: 0.32rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.texas-shuffle__deck {
  position: absolute;
  left: 50%;
  top: 0.05rem;
  width: 0.64rem;
  height: 0.22rem;
  transform: translateX(-50%);
}
.texas-shuffle__deck i {
  position: absolute;
  left: 0;
  width: 0.64rem;
  height: 0.105rem;
  border-radius: 0.025rem;
  background:
    linear-gradient(90deg, rgba(255,61,119,0.12), transparent 0.08rem 0.56rem, rgba(255,61,119,0.12)),
    linear-gradient(180deg, #fffef7, #d8d0bf);
  border: 1px solid rgba(0,0,0,0.26);
  box-shadow: 0 0.025rem 0.055rem rgba(0,0,0,0.26);
}
.texas-shuffle__deck i:nth-child(1) { top: 0; transform: rotate(-4deg); }
.texas-shuffle__deck i:nth-child(2) { top: 0.04rem; transform: rotate(2deg); }
.texas-shuffle__deck i:nth-child(3) { top: 0.08rem; transform: rotate(-1deg); }
.texas-shuffle__deck i:nth-child(4) { top: 0.12rem; transform: rotate(3deg); }
.texas-shuffle__hand {
  display: none;
  position: absolute;
  top: 0.02rem;
  width: 0.38rem;
  height: 0.22rem;
  border-radius: 0.2rem 0.2rem 0.1rem 0.1rem;
  background:
    linear-gradient(180deg, rgba(255,230,214,0.96), rgba(207,145,127,0.94));
  box-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.3);
}
.texas-shuffle__hand::before,
.texas-shuffle__hand::after {
  content: "";
  position: absolute;
  top: 0.13rem;
  width: 0.06rem;
  height: 0.18rem;
  border-radius: 0.05rem;
  background: linear-gradient(180deg, rgba(255,230,214,0.96), rgba(207,145,127,0.94));
}
.texas-shuffle__hand::before { left: 0.09rem; }
.texas-shuffle__hand::after { right: 0.09rem; }
.texas-shuffle__hand--left {
  left: 0.04rem;
  transform: rotate(12deg);
}
.texas-shuffle__hand--right {
  right: 0.04rem;
  transform: rotate(-12deg);
}
.texas-dealer.is-dealing .texas-shuffle__hand--left,
.texas-dealer.is-hit .texas-shuffle__hand--left {
  animation: texasShuffleLeft 0.72s ease-in-out 2;
}
.texas-dealer.is-dealing .texas-shuffle__hand--right,
.texas-dealer.is-hit .texas-shuffle__hand--right {
  animation: texasShuffleRight 0.72s ease-in-out 2;
}
.texas-dealer.is-dealing .texas-shuffle__deck,
.texas-dealer.is-hit .texas-shuffle__deck {
  animation: texasDeckRub 0.72s ease-in-out 2;
}
@keyframes texasShuffleLeft {
  0%, 100% { transform: translateX(0) rotate(12deg); }
  38% { transform: translateX(0.18rem) rotate(3deg); }
  68% { transform: translateX(0.08rem) rotate(18deg); }
}
@keyframes texasShuffleRight {
  0%, 100% { transform: translateX(0) rotate(-12deg); }
  38% { transform: translateX(-0.18rem) rotate(-3deg); }
  68% { transform: translateX(-0.08rem) rotate(-18deg); }
}
@keyframes texasDeckRub {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  35% { transform: translateX(-50%) rotate(4deg) scaleX(1.08); }
  70% { transform: translateX(-50%) rotate(-3deg) scaleX(0.96); }
}
.texas-chip-stack {
  display: none;
  position: absolute;
  z-index: 5;
  bottom: 0.5rem;
  width: 0.34rem;
  height: 0.32rem;
}
.texas-chip-stack--left { left: 0.62rem; }
.texas-chip-stack--right { right: 0.62rem; }
.texas-chip-stack i {
  position: absolute;
  left: 0;
  width: 0.34rem;
  height: 0.09rem;
  border-radius: 50%;
  background: linear-gradient(90deg, #fff, #ffd15c 40%, #d03c74);
  border: 1px solid rgba(0,0,0,0.24);
}
.texas-chip-stack i:nth-child(1) { bottom: 0; }
.texas-chip-stack i:nth-child(2) { bottom: 0.075rem; }
.texas-chip-stack i:nth-child(3) { bottom: 0.15rem; }
.texas-board {
  margin-top: 0.1rem;
}
.texas-table {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.12rem;
  min-height: 4.08rem;
  padding: 0.18rem 0.2rem 0.2rem;
  border-radius: 0.2rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 24%, rgba(255,255,255,0.05), transparent 0.014rem),
    radial-gradient(circle at 72% 52%, rgba(255,255,255,0.035), transparent 0.012rem),
    repeating-linear-gradient(32deg, rgba(255,255,255,0.026) 0 0.006rem, transparent 0.006rem 0.052rem),
    repeating-linear-gradient(122deg, rgba(0,0,0,0.04) 0 0.006rem, transparent 0.006rem 0.058rem),
    radial-gradient(ellipse at 50% 48%, rgba(9, 116, 78, 0.98) 0 45%, rgba(4, 48, 38, 1) 46% 66%, transparent 67%),
    radial-gradient(circle at 50% 0%, rgba(255,209,92,0.17), transparent 0.9rem),
    linear-gradient(145deg, #3a1d10 0, #1a0f0b 42%, #07080c 100%);
  border: 0.055rem solid rgba(119, 64, 31, 0.96);
  box-shadow:
    inset 0 0 0 0.018rem rgba(255,205,111,0.36),
    inset 0 0 0 0.07rem rgba(42, 20, 11, 0.78),
    inset 0 0.14rem 0.3rem rgba(255,255,255,0.055),
    inset 0 -0.2rem 0.42rem rgba(0,0,0,0.5),
    0 0.18rem 0.52rem rgba(0,0,0,0.38);
}
.texas-table::before {
  content: "";
  position: absolute;
  inset: 0.5rem 0.45rem 0.56rem;
  border-radius: 48%;
  border: 1px solid rgba(218, 163, 80, 0.42);
  box-shadow:
    inset 0 0 0.5rem rgba(0,0,0,0.32),
    0 0 0 0.055rem rgba(80, 38, 18, 0.38),
    0 0.06rem 0.22rem rgba(0,0,0,0.36);
  pointer-events: none;
}
.texas-table::after {
  content: "";
  position: absolute;
  inset: 0.11rem;
  border-radius: 0.13rem;
  border: 1px solid rgba(255,255,255,0.055);
  box-shadow: inset 0 0 0 0.022rem rgba(0,0,0,0.5);
  pointer-events: none;
}
.texas-table > * {
  position: relative;
  z-index: 1;
}
.texas-table .texas-pot {
  grid-column: 1 / 2;
  grid-row: 1;
}
.texas-table .texas-odds {
  grid-column: 2 / 3;
  grid-row: 1;
}
.texas-felt-title {
  grid-column: 1 / -1;
  margin: 0.1rem 0 -0.02rem;
  text-align: center;
  color: rgba(222, 171, 86, 0.34);
  font-size: 0.13rem;
  line-height: 1;
  font-weight: 950;
  letter-spacing: 0.04rem;
  text-shadow: 0 0.02rem 0.08rem rgba(0,0,0,0.62);
}
.texas-community {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.08rem;
  justify-items: center;
  align-content: center;
  min-height: 1.12rem;
  padding: 0.02rem 0;
  cursor: pointer;
}
.texas-community > b {
  color: rgba(244, 218, 165, 0.72);
  font-size: 0.11rem;
  font-weight: 950;
}
.texas-seat {
  display: grid;
  grid-template-columns: 0.72rem 1fr 0.72rem;
  align-items: center;
  gap: 0.08rem;
  min-height: 1.04rem;
  padding: 0.12rem;
  border-radius: 0.14rem;
  background:
    linear-gradient(180deg, rgba(7, 12, 15, 0.58), rgba(3, 5, 8, 0.74));
  border: 1px solid rgba(218, 163, 80, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -0.06rem 0.12rem rgba(0,0,0,0.24),
    0 0.08rem 0.18rem rgba(0,0,0,0.24);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.texas-seat:hover,
.texas-community:hover {
  transform: translateY(-0.01rem);
}
.texas-seat--user {
  grid-column: 1 / 2;
}
.texas-seat--dealer {
  grid-column: 2 / 3;
  background:
    linear-gradient(180deg, rgba(53, 13, 35, 0.52), rgba(13, 6, 14, 0.76));
  border-color: rgba(218, 163, 80, 0.2);
}
.texas-seat b {
  min-width: 0;
  color: rgba(255,255,255,0.82);
  font-size: 0.12rem;
  font-weight: 950;
}
.texas-seat b small {
  display: block;
  margin-top: 0.02rem;
  color: #ffd15c;
  font-size: 0.105rem;
  font-weight: 950;
}
.texas-seat > span {
  color: #ffd15c;
  font-size: 0.12rem;
  font-weight: 950;
  text-align: right;
  white-space: nowrap;
}
.texas-table .blackjack-cards {
  justify-content: center;
  overflow: visible;
}
.texas-table .blackjack-cards .mini-card {
  min-width: 0.56rem;
  min-height: 0.78rem;
  border-radius: 0.07rem;
  border: 1px solid rgba(255,255,255,0.82);
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.52), transparent 0.22rem),
    linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0) 22%),
    linear-gradient(180deg, #fffdf7, #e8dfcc);
  box-shadow:
    inset 0 0 0 0.018rem rgba(0,0,0,0.06),
    0 0.08rem 0.18rem rgba(0,0,0,0.36);
  transform-origin: center;
  animation: texasCardLand 0.34s cubic-bezier(0.2, 0.85, 0.2, 1);
}
.texas-table .blackjack-cards .mini-card.is-back {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(226, 177, 87, 0.56), transparent 0.1rem),
    linear-gradient(90deg, transparent 0 0.055rem, rgba(255,255,255,0.1) 0.055rem 0.07rem, transparent 0.07rem 0.49rem),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.075) 0 0.014rem, transparent 0.014rem 0.047rem),
    linear-gradient(135deg, #0b111d, #1b2440 46%, #56203f);
  border-color: rgba(226, 177, 87, 0.7);
  color: transparent;
}
.texas-table .blackjack-cards .mini-card.is-back::before,
.texas-table .blackjack-cards .mini-card.is-back::after {
  content: "";
  position: absolute;
  inset: 0.045rem;
  border-radius: 0.045rem;
  border: 1px solid rgba(226, 177, 87, 0.52);
  pointer-events: none;
}
.texas-table .blackjack-cards .mini-card.is-back::after {
  inset: 0.12rem 0.09rem;
  border-color: rgba(255,255,255,0.16);
  background:
    radial-gradient(circle, rgba(255, 231, 178, 0.92) 0 0.035rem, transparent 0.038rem),
    linear-gradient(45deg, transparent 0 44%, rgba(226,177,87,0.42) 45% 55%, transparent 56%),
    linear-gradient(-45deg, transparent 0 44%, rgba(226,177,87,0.32) 45% 55%, transparent 56%);
}
.texas-table .blackjack-cards .mini-card.is-pending {
  opacity: 0.32;
  filter: saturate(0.62);
  transform: scale(0.96);
}
.texas-table .blackjack-cards .mini-card.is-flip {
  animation: texasCardFlip 0.54s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes texasCardLand {
  0% { opacity: 0; transform: translateY(-0.28rem) rotate(-8deg) scale(0.88); }
  70% { opacity: 1; transform: translateY(0.02rem) rotate(2deg) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes texasCardFlip {
  0% { transform: rotateY(90deg) scale(0.96); filter: brightness(0.8); }
  55% { transform: rotateY(-8deg) scale(1.04); filter: brightness(1.2); }
  100% { transform: rotateY(0deg) scale(1); filter: brightness(1); }
}
.texas-table .texas-log {
  grid-column: 1 / -1;
  min-height: 0.42rem;
  border-radius: 0.12rem;
  background: rgba(3, 5, 9, 0.72);
  border: 1px solid rgba(218, 163, 80, 0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.texas-table .texas-pot,
.texas-table .texas-odds {
  border-radius: 0.12rem;
  background:
    linear-gradient(180deg, rgba(8, 10, 14, 0.82), rgba(3, 5, 8, 0.72));
  border: 1px solid rgba(218, 163, 80, 0.3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0.06rem 0.16rem rgba(0,0,0,0.25);
}
.texas-table .texas-odds {
  grid-template-columns: 0.7rem 0.48rem 1fr;
}
.texas-actions {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.texas-actions .interaction-primary,
.texas-actions .interaction-secondary,
.texas-raise-panel button {
  margin-top: 0;
  min-height: 0.44rem;
  padding: 0 0.06rem;
  border-radius: 0.12rem;
  background: var(--color-accent-soft);
  border: 1px solid rgba(255, 61, 119, 0.18);
  color: var(--color-accent);
  box-shadow: none;
}
.texas-actions .interaction-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
  box-shadow: 0 0.06rem 0.16rem rgba(255, 61, 119, 0.24);
  text-shadow: none;
}
.texas-actions .interaction-secondary:active,
.texas-actions .interaction-primary:active,
.texas-raise-panel button:active {
  transform: translateY(0.01rem);
  filter: brightness(0.94);
}
.texas-raise-panel {
  gap: 0.08rem;
}
@media (max-width: 520px) {
  .texas-rule-strip,
  .texas-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .texas-table {
    grid-template-columns: 1fr;
  }
  .texas-table .texas-pot,
  .texas-table .texas-odds,
  .texas-seat--user,
  .texas-seat--dealer {
    grid-column: 1 / -1;
  }
  .texas-seat {
    grid-template-columns: 0.58rem 1fr 0.62rem;
  }
  .texas-felt-title {
    font-size: 0.28rem;
  }
}
.interaction-primary,
.interaction-secondary {
  min-height: 0.42rem;
  padding: 0 0.16rem;
  border-radius: var(--radius-pill);
  font-size: 0.14rem;
  font-weight: 850;
}
.interaction-primary {
  margin-top: 0.16rem;
  border: 0;
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0.06rem 0.16rem rgba(255, 61, 119, 0.24);
}
.interaction-secondary {
  border: 1px solid rgba(255, 61, 119, 0.18);
  background: var(--color-accent-soft);
  color: var(--color-accent);
}
.interaction-result {
  text-align: center;
}
.interaction-result__emoji {
  font-size: 0;
  line-height: 1;
  margin-bottom: 0.08rem;
  color: var(--color-accent);
}
.interaction-result__emoji::before {
  content: "\2726";
  font-size: 0.34rem;
  line-height: 1;
  font-weight: 900;
}
.interaction-result__text {
  margin-top: 0.08rem;
  font-size: 0.145rem;
  line-height: 1.6;
  color: var(--color-text);
}
.interaction-result__grade {
  position: relative;
  height: 0.34rem;
  margin-top: 0.14rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  overflow: hidden;
}
.interaction-result__grade span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-accent), #ff8a5b);
}
.interaction-result__grade b {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 0.13rem;
  font-weight: 950;
}
.interaction-result__reward {
  margin-top: 0.12rem;
  padding: 0.08rem 0.12rem;
  border-radius: 0.12rem;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.12rem;
  font-weight: 850;
}
.interaction-result__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.08rem;
  margin-top: 0.16rem;
}
.interaction-result__actions .interaction-primary,
.interaction-result__actions .interaction-secondary {
  margin-top: 0;
}

/* ========== Confirm Modal ========== */
.confirm-overlay {
  position: fixed; inset: 0;
  z-index: 600;
  background: rgba(20, 18, 30, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.confirm-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.confirm-modal {
  width: calc(100% - 0.8rem);
  max-width: 3rem;
  background: #fff;
  border-radius: 0.16rem;
  padding: 0.22rem 0.18rem 0.16rem;
  text-align: center;
  transform: scale(0.94);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
}
.confirm-overlay.is-open .confirm-modal {
  transform: scale(1);
  opacity: 1;
}
.confirm-modal__icon {
  font-size: 0.32rem;
  margin-bottom: 0.06rem;
}
.confirm-modal__title {
  font-size: 0.17rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.06rem;
}
.confirm-modal__msg {
  font-size: 0.13rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 0.16rem;
}
.confirm-modal__msg strong { color: var(--color-text); font-weight: 700; }
.confirm-modal__bal {
  display: block;
  font-size: 0.11rem;
  color: var(--color-text-light);
  margin-top: 0.04rem;
}
.confirm-modal__actions {
  display: flex; gap: 0.08rem;
}
.confirm-modal__actions button {
  flex: 1;
  height: 0.4rem;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 0.14rem;
  font-weight: 700;
  cursor: pointer;
}
.confirm-modal__cancel {
  background: #f3f3f5;
  color: var(--color-text);
}
.confirm-modal__ok {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0.04rem 0.1rem rgba(255, 61, 119, 0.4);
}

/* ========== Video Submit Progress ========== */
.video-submit-overlay {
  position: fixed;
  inset: 0;
  z-index: 720;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  background: rgba(20, 18, 30, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.video-submit-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, visibility 0s linear 0s;
}
.video-submit-modal {
  width: min(3.2rem, 100%);
  background: #fff;
  border-radius: 0.18rem;
  padding: 0.24rem 0.18rem 0.18rem;
  text-align: center;
  box-shadow: 0 0.2rem 0.5rem rgba(24, 22, 35, 0.18);
  transform: translateY(0.12rem) scale(0.96);
  opacity: 0;
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.18s ease;
}
.video-submit-overlay.is-open .video-submit-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.video-submit-modal__icon {
  width: 0.52rem;
  height: 0.52rem;
  margin: 0 auto 0.12rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f6f6f8;
}
.video-submit-modal__spinner {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  border: 0.03rem solid #ececf0;
  border-top-color: var(--color-accent);
  animation: spin 0.8s linear infinite;
}
.video-submit-modal__mark {
  display: none;
  font-size: 0.26rem;
  font-weight: 800;
}
.video-submit-overlay.is-success .video-submit-modal__spinner,
.video-submit-overlay.is-error .video-submit-modal__spinner {
  display: none;
}
.video-submit-overlay.is-success .video-submit-modal__mark,
.video-submit-overlay.is-error .video-submit-modal__mark {
  display: block;
}
.video-submit-overlay.is-success .video-submit-modal__mark::before {
  content: "✓";
  color: #14b86a;
}
.video-submit-overlay.is-error .video-submit-modal__mark::before {
  content: "!";
  color: #ff3d77;
}
.video-submit-modal__title {
  font-size: 0.18rem;
  font-weight: 800;
  color: var(--color-text);
  margin-bottom: 0.08rem;
}
.video-submit-modal__msg {
  font-size: 0.135rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0;
}
.video-submit-modal__detail {
  min-height: 0.18rem;
  margin-top: 0.08rem;
  font-size: 0.12rem;
  line-height: 1.45;
  color: var(--color-text-light);
}
.video-submit-modal__actions {
  display: flex;
  gap: 0.1rem;
  margin-top: 0.18rem;
}
.video-submit-modal__actions[hidden] {
  display: none;
}
.video-submit-modal__actions button {
  flex: 1;
  height: 0.42rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: 0.14rem;
  font-weight: 700;
}
.video-submit-modal__cancel {
  background: #f3f3f5;
  color: var(--color-text);
}
.video-submit-modal__ok {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 0.06rem 0.14rem rgba(255, 61, 119, 0.32);
}

/* ========== Gift Sheet ========== */
.gift-sheet {
  position: fixed; inset: 0;
  z-index: 550;
  background: rgba(20, 18, 30, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.28s;
}
.gift-sheet.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}
.gift-sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--app-max-width);
  background: #fff;
  border-radius: 0.2rem 0.2rem 0 0;
  padding: 0.12rem 0.16rem calc(0.2rem + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}
.gift-sheet.is-open .gift-sheet__panel {
  transform: translateY(0);
}
.gift-sheet__handle {
  width: 0.36rem;
  height: 0.04rem;
  background: #d8d8dc;
  border-radius: 0.04rem;
  margin: 0 auto 0.1rem;
}
.gift-sheet__close {
  position: absolute;
  top: 0.1rem; right: 0.12rem;
  width: 0.28rem; height: 0.28rem;
  border-radius: 50%;
  background: #f3f3f5;
  display: flex; align-items: center; justify-content: center;
  border: none;
}
.gift-sheet__close svg {
  width: 0.12rem; height: 0.12rem;
  stroke: var(--color-text); stroke-width: 2.4; fill: none;
}
.gift-sheet__title {
  font-size: 0.16rem;
  font-weight: 800;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 0.02rem;
}
.gift-sheet__bal {
  text-align: center;
  font-size: 0.12rem;
  color: var(--color-text-muted);
  margin-bottom: 0.14rem;
}
.gift-options {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.08rem;
}
.gift-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04rem;
  padding: 0.12rem 0.04rem 0.1rem;
  background: #fafafa;
  border: 0.01rem solid var(--color-border);
  border-radius: 0.12rem;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.gift-opt:active {
  transform: scale(0.97);
  background: #f0f0f2;
}
.gift-opt__emoji {
  font-size: 0.34rem;
  line-height: 1;
}
.gift-opt__name {
  font-size: 0.12rem;
  font-weight: 700;
  color: var(--color-text);
}
.gift-opt__price {
  font-size: 0.12rem;
  font-weight: 700;
  color: var(--color-diamond);
}
.gift-opt__hint {
  font-size: 0.1rem;
  color: var(--color-accent);
  font-weight: 600;
}

/* ========== List Pages (Liked / Chat) ========== */
.list-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-bg-soft);
  overflow: hidden;
}
.list-page[hidden] { display: none; }
.list-page .list-overlay__back { display: none; }
.list-page .list-overlay__head {
  padding-left: 0.16rem;
}

/* Legacy overlay surface retained for older callers. */
.list-overlay {
  position: fixed; top: 0; left: 50%; bottom: 0;
  width: 100%; max-width: var(--app-max-width);
  height: 100vh; height: 100dvh;
  background: var(--color-bg-soft);
  z-index: 350;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.24s ease,
              visibility 0s linear 0.3s;
}
.list-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.24s ease,
              visibility 0s linear 0s;
}
.list-overlay__head {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: calc(0.12rem + env(safe-area-inset-top)) 0.14rem 0.12rem;
  background: var(--color-bg-soft);
  border-bottom: 1px solid var(--color-border-soft);
}
.list-overlay__back {
  width: 0.32rem; height: 0.32rem;
  border-radius: 50%;
  background: #f3f3f5;
  display: flex; align-items: center; justify-content: center;
  border: none;
}
.list-overlay__back svg {
  width: 0.16rem; height: 0.16rem;
  stroke: var(--color-text); stroke-width: 2.4; fill: none;
}
.list-overlay__title {
  font-size: 0.17rem;
  font-weight: 800;
  color: var(--color-text);
}
.list-overlay__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.12rem 0.14rem calc(var(--bottom-nav-height) + 0.2rem);
}
.list-overlay__body .cp-grid { gap: 0.06rem; }

/* Chat list rows */
.list-overlay__body--chat { padding: 0; }
.list-page .list-overlay__body--chat {
  padding-bottom: calc(var(--bottom-nav-height) + 0.16rem + env(safe-area-inset-bottom));
}
.chat-row {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  padding: 0.12rem 0.16rem;
  background: #fff;
  border-bottom: 1px solid var(--color-border-soft);
  cursor: pointer;
  transition: background 0.15s ease;
}
.chat-row:active { background: #f7f7f9; }
.chat-row__avatar-wrap {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 50%;
}
.chat-row__avatar {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  object-fit: cover;
}
.chat-row__avatar-wrap:focus-visible {
  outline: 0.02rem solid var(--color-accent);
  outline-offset: 0.03rem;
}
.chat-row.has-unread .chat-row__avatar {
  animation: unreadPulse 1.35s ease-in-out infinite;
}
.chat-row__body {
  flex: 1;
  min-width: 0;
}
.chat-row__name {
  font-size: 0.15rem;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row__msg {
  font-size: 0.12rem;
  color: var(--color-text-muted);
  margin-top: 0.02rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.04rem;
  flex-shrink: 0;
}
.chat-row__time {
  font-size: 0.1rem;
  color: var(--color-text-light);
}
.chat-row__badge {
  min-width: 0.18rem;
  height: 0.18rem;
  padding: 0 0.05rem;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.1rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}