:root {
  --bg: #14121c;
  --ink: #f7f2ea;
  --muted: rgba(247, 242, 234, 0.58);
  --line: rgba(255, 255, 255, 0.09);
  --accent: #ff9a6b;
  --teal: #7fe3d4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 3.4vh 5vw 3vh;
  isolation: isolate;
}

.glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(52% 40% at 50% 38%, #2b2444 0%, #1a1726 46%, #14121c 78%);
  z-index: -1;
}

/* ---------------------------------------------------------------- 飘屏弹幕 */
.darts {
  position: absolute;
  top: 11vh;
  left: 0;
  right: 0;
  height: 26vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.dart {
  position: absolute;
  left: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 0.9vh;
  white-space: nowrap;
  font-size: 1.95vh;
  line-height: 1.4;
  color: rgba(247, 242, 234, 0.9);
  background: rgba(20, 18, 28, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 99px;
  padding: 0.7vh 1.7vh;
  backdrop-filter: blur(6px);
  animation: fly var(--dur, 12s) linear forwards;
}
.dart .u { color: var(--accent); font-size: 1.75vh; }
.dart.gift { border-color: rgba(255, 154, 107, 0.5); background: rgba(255, 154, 107, 0.12); }
.dart.gift .u { color: #ffd0ab; }

@keyframes fly {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 100%)); }
}

/* ---------------------------------------------------------------- 顶栏 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 1.6vh; }

.status {
  width: 1.5vh;
  height: 1.5vh;
  border-radius: 50%;
  background: #6b6880;
  position: relative;
  flex: none;
}
.status i {
  position: absolute;
  inset: -0.55vh;
  border-radius: 50%;
  border: 1px solid transparent;
}
.status[data-state="thinking"] { background: var(--accent); }
.status[data-state="thinking"] i { border-color: rgba(255, 154, 107, 0.5); animation: ring 1.4s ease-out infinite; }
.status[data-state="speaking"] { background: var(--teal); }
.status[data-state="speaking"] i { border-color: rgba(127, 227, 212, 0.4); animation: ring 1.8s ease-out infinite; }

@keyframes ring {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}

.names { display: flex; flex-direction: column; line-height: 1.15; }
.name { font-size: 2.9vh; font-weight: 500; letter-spacing: 0.04em; }
.sub { font-size: 1.5vh; color: var(--muted); margin-top: 0.45vh; }

.eq { display: flex; align-items: flex-end; gap: 0.55vh; height: 3vh; margin-left: 0.6vh; }
.eq i {
  width: 0.42vh;
  height: 0.7vh;
  border-radius: 1vh;
  background: var(--teal);
  opacity: 0.85;
  transform-origin: bottom;
  transition: height 90ms linear;
}

.live {
  display: flex;
  align-items: center;
  gap: 0.9vh;
  font-size: 1.5vh;
  letter-spacing: 0.18em;
  color: #ffb3a0;
  border: 1px solid rgba(255, 154, 107, 0.35);
  background: rgba(255, 154, 107, 0.08);
  padding: 0.9vh 1.6vh;
  border-radius: 99px;
}
.live i {
  width: 1.1vh;
  height: 1.1vh;
  border-radius: 50%;
  background: #ff5f4d;
  animation: breathe 2.2s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------------------------------------------------------------- 形象 */
.figure {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
  min-height: 0;
}

.photo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.photo-wrap img {
  height: 100%;
  width: auto;
  object-fit: contain;
  user-select: none;
  will-change: transform;
  filter: drop-shadow(0 4vh 7vh rgba(0, 0, 0, 0.55));
  /* 让立绘边缘融进舞台背景，而不是一块贴上去的"照片" */
  -webkit-mask-image: radial-gradient(78% 82% at 50% 40%, #000 58%, rgba(0, 0, 0, 0.85) 74%, transparent 99%);
  mask-image: radial-gradient(78% 82% at 50% 40%, #000 58%, rgba(0, 0, 0, 0.85) 74%, transparent 99%);
}

#avatar {
  height: 100%;
  max-height: 100%;
  width: auto;
  filter: drop-shadow(0 4vh 6vh rgba(0, 0, 0, 0.45));
}

#head {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: sway 8s ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-1.1deg) translateY(0.4vh); }
  to { transform: rotate(1.1deg) translateY(-0.4vh); }
}

.eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: blink 6.4s infinite;
}
.eye:nth-of-type(2) { animation-delay: 0.06s; }
@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(0.08); }
}

/* ---------------------------------------------------------------- 弹幕 */
.feed {
  display: flex;
  flex-direction: column;
  gap: 1.1vh;
  align-items: flex-start;
  margin-bottom: 1.6vh;
  min-height: 0;
}

.bubble {
  max-width: 86%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 2.2vh;
  padding: 1.3vh 2vh;
  animation: pop 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes pop {
  from { opacity: 0; transform: translateY(1.4vh); }
  to { opacity: 1; transform: none; }
}
.bubble .who {
  font-size: 1.4vh;
  color: var(--accent);
  letter-spacing: 0.06em;
  margin-bottom: 0.5vh;
}
.bubble .txt { font-size: 1.85vh; line-height: 1.5; color: rgba(247, 242, 234, 0.92); }
.bubble .tag {
  display: inline-block;
  margin-top: 0.8vh;
  font-size: 1.3vh;
  color: rgba(127, 227, 212, 0.85);
  border: 1px solid rgba(127, 227, 212, 0.25);
  border-radius: 99px;
  padding: 0.35vh 1.1vh;
}

/* ---------------------------------------------------------------- 字幕 */
.caption {
  background: rgba(12, 10, 18, 0.62);
  border: 1px solid var(--line);
  border-radius: 2.6vh;
  padding: 2.4vh 3vh;
  min-height: 9.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(12px);
  transition: opacity 300ms ease;
}
.caption[data-empty="true"] .cap-text { opacity: 0.42; }
.cap-text {
  font-size: 2.75vh;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  transition: opacity 200ms ease;
}
.cap-text span { color: rgba(247, 242, 234, 0.36); transition: color 160ms linear; }
.cap-text span.on { color: var(--ink); }

.hint {
  text-align: center;
  font-size: 1.35vh;
  color: rgba(247, 242, 234, 0.3);
  letter-spacing: 0.1em;
  padding-top: 1.4vh;
}

/* ---------------------------------------------------------------- 交互遮罩 */
.tap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 8, 16, 0.72);
  backdrop-filter: blur(6px);
  border: 0;
  width: 100%;
  color: var(--ink);
  cursor: pointer;
  z-index: 9;
}
.tap[hidden] { display: none; }
.tap-card { text-align: center; }
.tap-title { font-size: 3.4vh; font-weight: 500; margin-bottom: 1.2vh; }
.tap-desc { font-size: 1.7vh; color: var(--muted); }