:root { color-scheme: dark; font-family: Inter, "PingFang SC", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; height: 100dvh; display: grid; place-items: center; background: #000; color: white; overflow: hidden; }
/* Phones fill the viewport; wider screens keep the 9:16 picture full height and
   letterbox the sides, so the controls always float over the avatar itself. */
.stage { position: relative; width: 100vw; height: 100dvh; overflow: hidden; background: #000; }
@media (min-aspect-ratio: 9/16) { .stage { width: calc(100dvh * 9 / 16); } }
video, #poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
video { z-index: 1; }
#poster { z-index: 0; }
.shade { position: absolute; z-index: 2; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); pointer-events: none; }
.status-panel { position: absolute; z-index: 3; left: 1.25rem; right: 1.25rem; bottom: calc(7.2rem + env(safe-area-inset-bottom)); text-align: center; text-shadow: 0 1px 12px #000; }
.status { display: inline-block; padding: .4rem .75rem; border-radius: 999px; background: rgba(15,18,25,.7); font-size: .8rem; }
.status.live::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; border-radius: 50%; background: #45df8b; }
.subtitle { min-height: 3.2rem; margin: .85rem auto 0; font-size: clamp(1rem, 3.2vw, 1.35rem); line-height: 1.55; font-weight: 600; }
.controls { position: absolute; z-index: 3; left: 1rem; right: 1rem; bottom: max(1.2rem, env(safe-area-inset-bottom)); display: flex; gap: .65rem; justify-content: center; }
button { min-height: 3rem; border: 0; border-radius: 999px; padding: 0 1.15rem; color: white; font: inherit; font-weight: 650; cursor: pointer; backdrop-filter: blur(12px); }
button:disabled { opacity: .42; cursor: default; }
.primary { background: #5c6cff; flex: 1; max-width: 11rem; }
.secondary { background: rgba(255,255,255,.16); }
.danger { color: #ffb8b8; }