* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #050018; color: #fff; font-family: "PingFang SC", "Noto Sans SC", sans-serif; overflow: hidden; }
.stage { position: relative; width: 100%; height: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; }
.city { position: absolute; inset: 0; background:
  radial-gradient(ellipse 80% 50% at 50% 18%, #6b2cff 0%, transparent 55%),
  linear-gradient(#120038 0%, #2a0a5c 38%, #0b0420 70%, #070018 100%); }
.city .glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, #ff4de680, transparent 42%); mix-blend-mode: screen; }
.towers { position: absolute; left: 0; right: 0; bottom: 18%; height: 46%;
  background:
    linear-gradient(#3a1d88, #1a0a40) 18% 100%/18% 70% no-repeat,
    linear-gradient(#5b2ad6, #14082e) 32% 100%/10% 92% no-repeat,
    linear-gradient(#7a3cff, #1b0840) 42% 100%/9% 100% no-repeat,
    linear-gradient(#4e22b8, #12062c) 58% 100%/9% 100% no-repeat,
    linear-gradient(#2e1578, #0e0424) 70% 100%/16% 78% no-repeat,
    linear-gradient(#24105a, #09031c) 88% 100%/22% 55% no-repeat;
  filter: drop-shadow(0 0 24px #b14dff);
}
.hearts span { position: absolute; color: #ff6ad5; text-shadow: 0 0 12px #ff4dff; animation: up 7s linear infinite; opacity: .75; }
@keyframes up { from { transform: translateY(20vh); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-90vh); opacity: 0; } }

.brand { position: absolute; left: 0; right: 0; top: 22%; text-align: center; z-index: 2; pointer-events: none; }
.logo-heart { width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; font-size: 44px;
  background: radial-gradient(circle at 30% 30%, #fff, #ff4d9d 42%, #7a2bff);
  box-shadow: 0 0 40px #ff4dff, 0 0 80px #6b2cff; }
.brand h1 { margin: 0; font-size: 34px; letter-spacing: .04em;
  background: linear-gradient(90deg, #fff, #ff9de8 40%, #7af0ff);
  -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px #ff4dff); }

.hud-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; z-index: 5; }
.live-badge { background: #ff2d4a; border-radius: 8px; padding: 4px 8px; font-size: 12px; font-weight: 700; }
.timer { font-variant-numeric: tabular-nums; opacity: .9; font-size: 13px; }

.ide { position: absolute; left: 4%; right: 4%; top: 12%; height: 58%; z-index: 4;
  background: #1b1630; border: 1px solid #6d5cff55; border-radius: 14px;
  box-shadow: 0 20px 60px #000a, 0 0 0 1px #ffffff10; display: flex; flex-direction: column; overflow: hidden; }
.ide-bar { height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #12101f; font-size: 12px; color: #c9b8ff; }
.ide-bar .dots { width: 42px; height: 10px; background: radial-gradient(circle, #ff5f57 4px, transparent 5px) 0 0/14px 10px,
  radial-gradient(circle, #febc2e 4px, transparent 5px) 14px 0/14px 10px,
  radial-gradient(circle, #28c840 4px, transparent 5px) 28px 0/14px 10px; }
#code { margin: 0; flex: 1; overflow: auto; padding: 10px 8px; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #e8dcff; }
#code .ln { display: inline-block; width: 28px; color: #6b5b8c; }
.kw { color: #c792ea; } .str { color: #c3e88d; } .fn { color: #82aaff; } .cm { color: #6b7a99; }
.ide-foot { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #12101f; font-size: 12px; }
.ide-foot i { flex: 1; height: 6px; border-radius: 9px; background: #2a2150; position: relative; overflow: hidden; }
.ide-foot i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: linear-gradient(90deg, #7af0ff, #ff7ad9); }
.preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }
.preview-tag { position: absolute; top: calc(44px + env(safe-area-inset-top)); left: 12px; z-index: 6;
  background: #5b3dff; padding: 4px 10px; border-radius: 8px; font-size: 12px; }

.comments { position: absolute; left: 10px; right: 90px; bottom: 96px; z-index: 5; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.comments .row { display: flex; gap: 8px; align-items: center; background: #0006; padding: 6px 10px; border-radius: 999px; width: fit-content; max-width: 100%; font-size: 13px; }
.comments .av { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(#ffb8ea, #7a5cff); display: grid; place-items: center; font-size: 12px; }
.gift-name { color: #ffd36a; }

.op { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, #000d 36%); }
.gifts { display: flex; gap: 6px; margin-bottom: 6px; }
.gifts button { border: 0; border-radius: 999px; padding: 6px 10px; background: #2a1848; color: #fff; }
.composer { display: flex; gap: 6px; }
.composer input { flex: 1; min-width: 0; border: 0; border-radius: 999px; padding: 10px 12px; background: #1b1230; color: #fff; }
#nick { flex: 0 0 88px; }
.go { border: 0; border-radius: 999px; padding: 0 14px; background: linear-gradient(90deg, #ff4d9d, #7a4dff); color: #fff; font-weight: 700; }
.hint { margin: 6px 0 0; font-size: 11px; color: #c9b8ff; opacity: .8; }
.hidden { display: none !important; }
body.cast .op { display: none; }
body.cast .comments { bottom: 24px; }