/* THE ROOM (CAM 01) live view. Used by / and /live. The stage is 1200x675 logical px scaled by JS. */
.rv{position:relative;overflow:hidden;background:#050605;aspect-ratio:16/9;width:100%;contain:layout paint;isolation:isolate}
.rv-stage{position:absolute;left:0;top:0;width:1200px;height:675px;transform-origin:0 0;--osd-fs:17px;--inset:30px;--bub-fs:15px;--bub-w:232px;--toast-fs:18px}
.rv-svg{position:absolute;left:0;top:0;width:1200px;height:675px;display:block}
.rv-noise{position:absolute;left:0;top:0;width:1200px;height:675px;opacity:.1;mix-blend-mode:screen;pointer-events:none;image-rendering:pixelated}
.rv-fx{position:absolute;inset:0;pointer-events:none}
.rv-tint{background:rgba(110,150,110,.10);mix-blend-mode:overlay}
.rv-scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.rv-vig{background:radial-gradient(ellipse at 50% 45%,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}

/* on-screen display */
.rv-osd{position:absolute;inset:0;pointer-events:none;font-family:JBM,ui-monospace,monospace;font-weight:700;color:var(--bone,#EEEBE0);letter-spacing:.08em;font-size:var(--osd-fs);text-shadow:0 2px 0 #000,0 0 6px rgba(0,0,0,.8)}
.rv-o{position:absolute;white-space:nowrap;line-height:1.25}
.rv-o.tl{left:calc(var(--inset) + 6px);top:calc(var(--inset) + var(--osd-top,0px));display:flex;flex-direction:column;gap:.25em}
.rv-o.tr{right:calc(var(--inset) + 6px);top:calc(var(--inset) + var(--osd-top,0px))}
.rv-o.tc{left:50%;top:calc(var(--inset) + var(--osd-top,0px));transform:translateX(-50%);color:var(--charge,#FFC21A)}
.rv-o.tc.bad{color:var(--drain,#FF5A36)}
.rv-o.bl{left:calc(var(--inset) + 6px);bottom:var(--osd-bottom,var(--inset))}
.rv-o.br{right:calc(var(--inset) + 6px);bottom:var(--osd-bottom,var(--inset))}
.rv-beat{color:var(--charge,#FFC21A)}
.rv-beat:empty{display:none}
.rv-rec{color:var(--drain,#FF5A36);animation:rv-blink 1s steps(1,end) infinite}
.rv-outlet-state.live{color:var(--charge,#FFC21A)}
.rv-outlet-state.weak,.rv-outlet-state.dead{color:var(--drain,#FF5A36)}
.rv-outlet-state.weak{animation:rv-blink .7s steps(1,end) infinite}
.rv-corner{position:absolute;width:26px;height:26px;border:0 solid var(--bone,#EEEBE0);opacity:.85;transform-origin:center}
.rv-corner.tl{left:calc(var(--inset) - 12px);top:calc(var(--inset) + var(--osd-top,0px) - 12px);border-width:3px 0 0 3px}
.rv-corner.tr{right:calc(var(--inset) - 12px);top:calc(var(--inset) + var(--osd-top,0px) - 12px);border-width:3px 3px 0 0}
.rv-corner.bl{left:calc(var(--inset) - 12px);bottom:calc(var(--osd-bottom,var(--inset)) - 12px);border-width:0 0 3px 3px}
.rv-corner.br{right:calc(var(--inset) - 12px);bottom:calc(var(--osd-bottom,var(--inset)) - 12px);border-width:0 3px 3px 0}
@keyframes rv-blink{50%{opacity:.15}}

/* battery states */
.rv-batt.low{animation:rv-blink 1.1s steps(1,end) infinite}

/* speech bubbles */
.rv-bubbles{position:absolute;inset:0;pointer-events:none}
.rv-bub{position:absolute;max-width:var(--bub-w);width:max-content;background:var(--bone,#EEEBE0);color:#121412;border:3px solid #121412;border-radius:14px;padding:.42em .62em .48em;font:500 var(--bub-fs)/1.28 Inter,system-ui,sans-serif;box-shadow:0 4px 0 rgba(0,0,0,.45);transition:opacity .6s ease}
.rv-bub b{display:block;font-family:Bungee,Impact,sans-serif;font-weight:400;font-size:.72em;letter-spacing:.04em;line-height:1.1;margin-bottom:.12em;color:#121412;opacity:.7}
.rv-bub::after{content:"";position:absolute;left:var(--tail,50%);bottom:-12px;width:16px;height:16px;background:var(--bone,#EEEBE0);border:3px solid #121412;border-top:0;border-left:0;transform:translateX(-50%) rotate(45deg) skew(8deg,8deg);border-radius:0 0 4px 0}
.rv-bub.stacked::after{display:none}
.rv-bub.age1{opacity:.88}
.rv-bub.age2{opacity:.5}
.rv-bub.loud{font-size:calc(var(--bub-fs) * 1.32);font-weight:800;text-transform:uppercase;letter-spacing:.01em;background:var(--charge,#FFC21A);border-width:4px}
.rv-bub.loud::after{background:var(--charge,#FFC21A);border-width:4px}
.rv-bub.dark{opacity:.35}
.rv-bub.new{animation:rv-pop .35s cubic-bezier(.16,1,.3,1)}
@keyframes rv-pop{from{transform:translateY(10px) scale(.9);opacity:0}}

/* paid-action toasts */
.rv-toasts{position:absolute;inset:0;pointer-events:none}
.rv-toast{position:absolute;left:50%;top:548px;transform:translate(-50%,14px);opacity:0;display:flex;align-items:center;gap:.7em;max-width:1000px;white-space:nowrap;font:700 var(--toast-fs)/1.2 JBM,ui-monospace,monospace;letter-spacing:.04em;background:var(--charge,#FFC21A);color:#121412;padding:.5em .85em;border:3px solid #121412;box-shadow:0 6px 0 rgba(0,0,0,.5);transition:opacity .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.rv-toast b{font-family:Bungee,Impact,sans-serif;font-weight:400;background:#121412;color:var(--charge,#FFC21A);padding:.12em .45em;letter-spacing:.02em}
.rv-toast span{overflow:hidden;text-overflow:ellipsis}
.rv-toast.in{opacity:1;transform:translate(-50%,0)}
.rv-toast.out{opacity:0;transform:translate(-50%,-8px)}

/* no signal */
.rv-nosignal{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:.2em;background:#0b0c0a;color:var(--bone,#EEEBE0);font-family:Bungee,Impact,sans-serif;font-size:calc(var(--osd-fs) * 3.4);letter-spacing:.02em}
.rv-nosignal small{font:700 var(--osd-fs) JBM,ui-monospace,monospace;letter-spacing:.12em;color:var(--grime,#8C9086)}
.rv-empty .rv-nosignal{display:flex}
.rv-empty .rv-noise{opacity:.35;z-index:2}
.rv:not([data-signal="ok"]):not(.rv-empty) .rv-noise{opacity:.18}

@media (prefers-reduced-motion:reduce){
  .rv-rec,.rv-outlet-state.weak,.rv-batt.low{animation:none}
  .rv-bub,.rv-toast{transition:none}
  .rv-bub.new{animation:none}
}

/* stream layout: bottom OSD moves into the lower third (see live.css) */
.rv-live .rv-o.bl,.rv-live .rv-o.br,.rv-live .rv-corner.bl,.rv-live .rv-corner.br{display:none}
/* on the home page the LIVE badge carries the status flag */
.cam .rv-o.tc{display:none}