.audience-area{max-width:1320px;margin:16px auto 20px;padding:20px 24px;background:#15130fe8;border:1px solid #a891633b}.audience-area[hidden],.audience-stickers[hidden]{display:none!important}.audience-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.audience-heading h3{font:800 29px 'Barlow Condensed';margin:7px 0 15px}.audience-toggle{display:flex;gap:8px;align-items:center;font-size:13px;color:#d0c6b5}.audience-toggle input{accent-color:#d44235}.audience-composer{display:grid;grid-template-columns:minmax(145px,.7fr) minmax(220px,1.5fr) auto;gap:14px;align-items:end}.audience-composer label{display:grid;gap:7px;color:#c7bda9;font-size:12px}.audience-composer select{max-width:100%;min-width:0;background:#28221a;border:1px solid #75684e;color:#eee5d6;font:14px 'DM Sans';padding:12px}.audience-area p[role=status]{font-size:13px;color:#c2b38f;margin:13px 0 6px}.audience-note{font:11px/1.6 monospace;color:#9a9283;margin:7px 0}.audience-stickers{display:flex;flex-wrap:wrap;gap:14px;padding:14px 0 2px;pointer-events:none}.audience-sticker{display:flex;align-items:center;gap:9px;position:relative;background:#ece1bc;color:#1b1915;padding:10px 13px 10px 9px;max-width:260px;min-height:61px;border:2px solid #f6eed1;border-radius:4px;box-shadow:3px 4px 0 #0005,inset 0 0 14px #715a2520;transform:rotate(-3deg);animation:sticker-arrive .35s ease-out both;transition:opacity 1.8s,transform 1.8s}.audience-sticker:nth-child(even){transform:rotate(3deg);background:#e6bd82}.audience-sticker:after{content:'';position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;background:linear-gradient(135deg,#e0ce9c 50%,#15130f 51%);border-radius:2px}.audience-avatar{display:grid;place-content:center;flex-shrink:0;width:39px;height:39px;border-radius:50%;background:var(--sticker-color);font-size:25px;border:2px solid #ffffff80;box-shadow:0 1px 2px #0005}.audience-sticker p{margin:0;font:800 17px/1.1 'Barlow Condensed';letter-spacing:.2px;overflow-wrap:anywhere}.sticker-dot{position:absolute;top:-6px;left:50%;height:12px;width:40px;transform:rotate(-8deg);background:#c7b78b90;border:1px solid #fff2}.audience-sticker.sticker-leaving{opacity:0;transform:translateY(9px) rotate(-5deg)}.audience-side-rails{position:absolute;inset:0;z-index:5;padding:0;display:block;overflow:hidden}.audience-side-rails .audience-sticker{position:absolute;left:16px;top:calc(14% + var(--sticker-slot)*24%);width:168px;max-width:168px;padding:11px 8px}.audience-side-rails .sticker-right{left:auto;right:16px}.audience-side-rails .audience-avatar{width:32px;height:32px;font-size:21px}.audience-side-rails .audience-sticker p{font-size:16px}body:has(.cabinet:fullscreen) .audience-side-rails{display:none}@keyframes sticker-arrive{from{opacity:0;scale:.85}to{opacity:1;scale:1}}@media(prefers-reduced-motion:reduce){.audience-sticker{animation:none;transition:none}}@media(max-width:700px){.audience-area{padding:16px;margin:12px 14px}.audience-heading{align-items:flex-start;gap:10px}.audience-toggle{font-size:11px}.audience-composer{grid-template-columns:1fr}.audience-composer select{font-size:15px}.audience-stickers{display:grid;grid-template-columns:1fr 1fr;gap:12px}.audience-sticker{max-width:none;padding:9px 7px;gap:6px}.audience-avatar{width:30px;height:30px;font-size:20px}.audience-sticker p{font-size:15px}}
/* Keep the live audience next to the television, within its own reserved column. */
@media(min-width:1100px){
 .listening-stage.has-audience>.cabinet,body.theater .listening-stage.has-audience>.cabinet{left:calc((100% - 336px)/2);width:min(calc(94% - 336px),calc(var(--room-layout-height,var(--tv-fit-height,500px))*var(--tv-ratio)*.93))}
 .listening-stage>.audience-area{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:288px;max-height:calc(100% - 32px);overflow:auto;margin:0;padding:20px 18px;z-index:6;border-color:#c5a47760;background:linear-gradient(145deg,#241e16f5,#12110ff5);box-shadow:0 12px 35px #0007;border-radius:3px;scrollbar-width:thin;scrollbar-color:#6f5d3e #17130e}
 .listening-stage>.audience-area .audience-heading{display:block}
 .listening-stage>.audience-area .audience-heading h3{margin-bottom:10px}
 .listening-stage>.audience-area .audience-toggle{margin-bottom:18px;font-size:12px}
 .listening-stage>.audience-area .audience-composer{grid-template-columns:1fr;gap:12px}
 .listening-stage>.audience-area .audience-composer select{font-size:12px;padding:11px 8px}
 .listening-stage>.audience-area .solid-action{width:100%;font-size:12px;padding:13px 8px}
 .listening-stage>.audience-area p[role=status]{font-size:12px;line-height:1.6}
 .listening-stage>.audience-area .audience-note{font-size:10px;line-height:1.7}
 .listening-stage>.audience-area .audience-stickers{display:flex;flex-direction:column;gap:15px;padding:16px 5px 8px}
 .listening-stage>.audience-area .audience-sticker{width:100%;max-width:none;flex-shrink:0}
}
/* Shared stickers sit to the left; the composer stays to the right. */
@media(min-width:1100px){
 .listening-stage.has-audience>.cabinet,body.theater .listening-stage.has-audience>.cabinet{left:calc(50% - 48px);width:min(calc(100% - 560px),calc(var(--room-layout-height,var(--tv-fit-height,500px))*var(--tv-ratio)*.93))}
 .listening-stage>.audience-area{right:16px;width:264px;padding:18px 16px}
 .listening-stage>.audience-left-rail{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:184px;max-height:calc(100% - 32px);overflow:hidden;z-index:5;display:flex;flex-direction:column;gap:18px;padding:12px 5px;pointer-events:none}
 .audience-left-rail .audience-sticker{width:100%;max-width:none;flex-shrink:0;padding:11px 8px;gap:7px}
 .audience-left-rail .audience-avatar{width:32px;height:32px;font-size:21px}
 .audience-left-rail .audience-sticker p{font-size:17px}
}
@media(min-width:1100px){.listening-stage>.audience-area .audience-composer select{font-size:14px}.listening-stage>.audience-area p[role=status]{font-size:14px}.listening-stage>.audience-area .audience-note{font-size:12px}.listening-stage>.audience-area .solid-action{font-size:13px}}

/* Anchor to the measured TV edges, rather than a wide monitor's outer edges. */
@media(min-width:1100px){
 .listening-stage>.audience-area{left:calc(var(--audience-tv-right,100%) + 20px);right:auto}
 .listening-stage>.audience-left-rail{left:calc(var(--audience-tv-left,220px) - 204px)}
}