:root {
  color-scheme: dark;
  --lime: #c8ff90;
  --lime-strong: #8ee665;
  --ink: #f7fff3;
  --muted: #abc0a5;
  --glass: rgba(8, 15, 17, .74);
  --line: rgba(202, 255, 149, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #07100d; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif; }

.broadcast {
  isolation: isolate;
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(161, 255, 118, .22), transparent 32%),
    radial-gradient(circle at 50% 84%, rgba(45, 180, 137, .15), transparent 38%),
    linear-gradient(135deg, #091513 0%, #0d1919 42%, #07100f 100%);
}

.broadcast[data-emotion="happy"], .broadcast[data-emotion="excited"] { --lime: #d8ff8f; --lime-strong: #a8f06f; }
.broadcast[data-emotion="curious"] { --lime: #9ff8d5; --lime-strong: #66ddb5; }
.broadcast[data-emotion="teasing"] { --lime: #ffd58e; --lime-strong: #f3a765; }
.broadcast[data-emotion="concerned"], .broadcast[data-emotion="sleepy"] { --lime: #a8d8c1; --lime-strong: #77ad9a; }
.broadcast[data-emotion="surprised"] { --lime: #f0ed91; --lime-strong: #d8d35f; }
.broadcast[data-emotion="annoyed"] { --lime: #ff9a88; --lime-strong: #e66f65; }

.broadcast::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .3;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 5.2vw 5.2vw;
}

.broadcast::after {
  content: "AKULU";
  position: absolute;
  z-index: -1;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(205, 255, 168, .028);
  font-size: clamp(150px, 25vw, 460px);
  font-weight: 900;
  letter-spacing: -.06em;
}

.ambient { position: absolute; z-index: -1; border: 1px solid rgba(184,255,139,.18); border-radius: 50%; }
.ambient-one { top: 8%; left: 50%; width: 48vw; height: 48vw; transform: translateX(-50%); box-shadow: inset 0 0 8vw rgba(133,255,102,.07), 0 0 8vw rgba(133,255,102,.05); animation: drift 9s ease-in-out infinite; }
.ambient-two { left: 50%; bottom: -32vw; width: 58vw; height: 58vw; transform: translateX(-50%); border-color: rgba(125,239,209,.1); }
.pixel-grid { position: absolute; z-index: -1; right: -8%; bottom: -32%; width: 78%; height: 62%; background-image: linear-gradient(rgba(154,255,130,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(154,255,130,.15) 1px, transparent 1px); background-size: 58px 58px; transform: perspective(420px) rotateX(62deg); mask-image: linear-gradient(to bottom, transparent 0, #000 32%, #000 100%); }

.channel-mark { position: absolute; z-index: 8; top: 4.5vh; left: 3.2vw; display: flex; align-items: center; gap: 12px; }
.channel-mark::after { content: ""; width: min(24vw, 390px); height: 1px; margin-left: 14px; background: linear-gradient(90deg, var(--lime), transparent); opacity: .35; }
.channel-mark strong { display: block; font-size: clamp(19px, 1.55vw, 30px); letter-spacing: .16em; line-height: 1; }
.channel-mark small { display: block; margin-top: 7px; color: var(--muted); font-size: clamp(8px, .62vw, 12px); font-weight: 700; letter-spacing: .25em; }
.live-dot { width: 12px; height: 12px; border: 3px solid rgba(10,20,15,.9); border-radius: 50%; background: #ff5278; box-shadow: 0 0 0 2px #ff5278, 0 0 18px #ff5278; animation: live-pulse 1.1s ease-in-out infinite alternate; }

.danmaku-panel { position: absolute; z-index: 5; top: 18vh; left: 3.2vw; width: min(30vw, 500px); }
.panel-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; padding: 0 4px 9px; border-bottom: 1px solid var(--line); font-size: clamp(10px, .75vw, 14px); font-weight: 800; letter-spacing: .18em; }
.panel-title i { color: #86d877; font-size: .78em; font-style: normal; letter-spacing: .12em; }
.danmaku-list { display: flex; flex-direction: column; gap: 10px; }
.danmaku-list article { width: fit-content; max-width: 100%; border: 1px solid rgba(210,255,178,.12); border-radius: 5px 16px 16px 16px; padding: 10px 14px; background: linear-gradient(100deg, rgba(10,20,18,.78), rgba(15,28,25,.5)); box-shadow: 0 10px 35px rgba(0,0,0,.13); backdrop-filter: blur(10px); animation: message-in .35s ease-out both; }
.danmaku-list b { display: block; margin-bottom: 3px; color: var(--lime); font-size: clamp(9px, .66vw, 12px); letter-spacing: .08em; }
.danmaku-list p { margin: 0; color: rgba(247,255,243,.93); font-size: clamp(12px, 1vw, 19px); line-height: 1.45; }
.danmaku-list article.gift b { color: #ffe48f; }

.avatar-stage { position: absolute; z-index: 3; top: 0; left: 50%; width: min(76vw, 1320px); height: 86vh; overflow: hidden; transform: translateX(-50%); filter: drop-shadow(0 28px 55px rgba(0,0,0,.38)); }
.avatar-aura { position: absolute; z-index: 0; top: 15%; left: 50%; width: min(54vw, 850px); aspect-ratio: 1; border: 1px solid rgba(218,255,191,.28); border-radius: 50%; transform: translateX(-50%); box-shadow: inset 0 0 7vw rgba(171,255,120,.08), 0 0 8vw rgba(143,255,110,.08); }
#stageCanvas { position: absolute; z-index: 2; inset: 0; display: block; width: 100%; height: 100%; }
.stage-fallback { position: absolute; z-index: 1; top: 5%; left: 50%; width: 62%; height: 100%; transform: translateX(-50%); object-fit: cover; object-position: 50% 19%; filter: saturate(.85); mix-blend-mode: screen; opacity: .7; }
.live2d-ready .stage-fallback { visibility: hidden; opacity: 0; }
.speaking .avatar-aura { animation: aura-talk calc(.9s - var(--emotion-intensity, .3) * .32s) ease-in-out infinite alternate; }

.caption { position: absolute; z-index: 10; bottom: 7.6vh; left: 50%; display: grid; width: min(86vw, 1120px); min-height: 88px; transform: translateX(-50%); grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; border: 1px solid rgba(218,255,193,.25); border-left: 3px solid var(--lime); border-radius: 10px 24px 24px 10px; padding: 14px 22px 14px 16px; background: linear-gradient(100deg, rgba(7,13,15,.93), rgba(11,20,20,.78)); box-shadow: 0 25px 65px rgba(0,0,0,.32); backdrop-filter: blur(16px); }
.speaker { min-width: 86px; border-right: 1px solid var(--line); padding-right: 17px; }
.speaker span { display: block; color: var(--lime); font-size: clamp(14px, 1.05vw, 20px); font-weight: 900; letter-spacing: .12em; }
.speaker small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.caption p { margin: 0; font-size: clamp(18px, 1.45vw, 28px); font-weight: 650; line-height: 1.5; text-shadow: 0 2px 9px #000; }
.voice-wave { display: flex; height: 30px; align-items: center; gap: 3px; }
.voice-wave i { width: 3px; height: 7px; border-radius: 9px; background: var(--lime); opacity: .36; }
.speaking ~ .caption .voice-wave i, .broadcast.talking .voice-wave i { animation: wave .46s ease-in-out infinite alternate; opacity: .9; }
.voice-wave i:nth-child(2) { animation-delay: -.15s !important; }.voice-wave i:nth-child(3) { animation-delay: -.3s !important; }.voice-wave i:nth-child(4) { animation-delay: -.1s !important; }.voice-wave i:nth-child(5) { animation-delay: -.24s !important; }

footer { position: absolute; z-index: 12; right: 3.2vw; bottom: 2.2vh; left: 3.2vw; display: flex; justify-content: space-between; color: rgba(214,236,207,.5); font-size: clamp(8px, .58vw, 11px); letter-spacing: .06em; }

@keyframes live-pulse { to { opacity: .45; } }
@keyframes drift { 50% { transform: translate(-50%, -2vh) scale(1.03); } }
@keyframes aura-talk { to { border-color: rgba(217,255,184,.72); box-shadow: inset 0 0 10vw rgba(171,255,120,.18), 0 0 10vw rgba(143,255,110,.16); } }
@keyframes wave { to { height: 28px; } }
@keyframes message-in { from { opacity: 0; transform: translateX(-18px); } }

@media (max-aspect-ratio: 4/3) {
  .channel-mark { top: 2.5vh; left: 5vw; }
  .channel-mark::after { width: 22vw; }
  .danmaku-panel { z-index: 7; top: auto; bottom: 18vh; left: 50%; width: min(88vw, 560px); transform: translateX(-50%); }
  .danmaku-list article:nth-child(-n+2) { display: none; }
  .avatar-stage { right: auto; left: 50%; width: 100vw; height: 84svh; transform: translateX(-50%); }
  .avatar-aura { width: min(82vw, 680px); }
  .caption { right: auto; bottom: 7vh; left: 50%; width: min(92vw, 1020px); min-height: 76px; transform: translateX(-50%); }
  .caption p { font-size: clamp(15px, 3.2vw, 22px); }
  .speaker { min-width: 68px; }
  footer { right: 4vw; left: 4vw; }
}

@media (max-width: 600px) {
  .channel-mark { left: 50%; transform: translateX(-50%); }
  .channel-mark::after { display: none; }
  .danmaku-panel { bottom: 20vh; left: 50%; width: 90vw; transform: translateX(-50%); }
  .danmaku-list article:nth-child(-n+3) { display: none; }
  .avatar-stage { right: auto; left: 50%; width: 100vw; height: 84svh; transform: translateX(-50%); }
  .avatar-aura { top: 12%; width: 88vw; }
  .caption { grid-template-columns: auto 1fr; gap: 12px; padding: 11px 14px; }
  .caption p { line-height: 1.4; }
  .voice-wave { display: none; }
  footer span:last-child { display: none; }
}