/* ===== Layouts 4 (4 guests in one row) / 5 (single camera) share layout 1's chrome on the 1920x1080 canvas.
   ===== (fluid rules below are kept for reference/unused) + 5 (single camera) and the live MEDIA panel (all layouts) =====
   Layouts 4/5 are fluid: they fill any window/browser source edge to edge (no 1920x1080 scaling, no letterbox).
   OBS: with ?obs every camera slot is transparent — put your camera sources under the overlay in the same rectangles
   (layout 4 = four equal quadrants, layout 5 = the full frame). Light weights only: no bold anywhere. */
html.fluid,html.fluid body.fluid{width:100vw;height:100vh}
body.fluid{transform:none!important}
body.fluid>.cams{position:absolute;inset:0;top:0;left:0;right:0;height:auto;display:grid;gap:0;animation:vfade .6s var(--ease,ease) both}
body.l4>.cams{grid-template-columns:repeat(4,1fr)}
body.l5>.cams{grid-template-columns:1fr}
@keyframes vfade{from{opacity:0}}
body.fluid .cam{border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
body.fluid .cam .lt{padding:clamp(40px,7vh,96px) clamp(20px,2.2vw,48px) clamp(16px,2.6vh,40px);background:linear-gradient(transparent,rgba(0,0,0,.72))}
body.fluid .cam .nm{font-family:var(--disp);font-weight:400;letter-spacing:.06em;color:#fff}
body.fluid .cam .nm::before{background:var(--acc)}
body.fluid .cam .ti{font-family:var(--sans);font-weight:300;letter-spacing:.02em;color:#e3e7ea}
body.fluid .cam .ti .h{font-family:var(--sans);font-weight:300;letter-spacing:.04em;color:var(--acc);vertical-align:0}
body.fluid .cam .badge{font-family:var(--sans);font-weight:300;letter-spacing:.14em;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.6);color:#e9edf5}
body.l4{--nm:24}
body.l4 .cam .lt{padding-left:16px;padding-right:16px}body.l4 .cam .ti{font-size:16px}
/* name/title tag swaps crossfade via .xf (shared with other layouts) */

/* ----- live media panel: sits inside the chosen camera slot (JS sets left/top/width/height in canvas px), "full" = whole frame ----- */
.media{position:absolute;left:0;top:0;width:1920px;height:1080px;z-index:20;opacity:0;visibility:hidden;container-type:size;background:#000;
 box-shadow:0 0 0 1px rgba(255,255,255,.14);
 transition:opacity .5s var(--ease,ease),left .7s var(--ease,ease),top .7s var(--ease,ease),width .7s var(--ease,ease),height .7s var(--ease,ease),visibility 0s linear .5s}
.media.on{opacity:1;visibility:visible;transition:opacity .5s var(--ease,ease),left .7s var(--ease,ease),top .7s var(--ease,ease),width .7s var(--ease,ease),height .7s var(--ease,ease),visibility 0s}
.media.full{z-index:30;box-shadow:none}
.media .mstage{position:absolute;inset:0 0 clamp(32px,7cqh,56px);overflow:hidden}
.media .mitem{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease,ease)}.media .mitem.in{opacity:1}
.media .mitem.image img{width:100%;height:100%;object-fit:contain;display:block}
.media .mitem iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.media .mitem.blocked iframe{display:none}
.media .mcard{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(8px,3cqh,24px);padding:0 8cqw;background:#000;
 background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;text-transform:none}
.media .mck{font:300 clamp(11px,1.6cqw,15px) var(--sans);letter-spacing:.3em;color:var(--acc);text-transform:uppercase}
.media .mch{font:400 clamp(20px,5.4cqw,64px)/1.1 var(--disp);letter-spacing:.04em;color:#fff;overflow-wrap:anywhere;text-transform:uppercase}
.media .mcu{font:300 clamp(13px,2.4cqw,28px)/1.35 var(--sans);letter-spacing:.01em;color:#c9d0cd;overflow-wrap:anywhere;padding-left:clamp(12px,2cqw,24px);border-left:1px solid var(--acc)}
.media .mcap{position:absolute;left:0;right:0;bottom:0;height:clamp(32px,7cqh,56px);display:flex;align-items:center;gap:clamp(8px,1.4cqw,16px);padding:0 clamp(12px,2cqw,24px);border-top:1px solid rgba(255,255,255,.14);
 text-transform:none;white-space:nowrap;overflow:hidden}
.media .mcap i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.media .mcap .ml{font:400 clamp(12px,1.6cqw,18px) var(--disp);letter-spacing:.08em;color:#fff;text-transform:uppercase;flex:none;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.media .mcap .mu{font:300 clamp(11px,1.4cqw,16px) var(--sans);letter-spacing:.02em;color:var(--mut,#838b88);overflow:hidden;text-overflow:ellipsis;min-width:0}
.media.cardmode .mcap .mu{display:none}

/* ----- layout 5 side panel (Kalshi chart C or live media): camera eases narrower, panel slides/fades in on the right ----- */
body.l5{--s5w:728px}
body.l5>.cams{transition:right .7s var(--ease,ease),left .7s var(--ease,ease)}
body.l5.s5>.cams{right:calc(var(--m,48px) + var(--s5w) + 8px)}
.side5{position:absolute;top:64px;right:var(--m,48px);width:var(--s5w);height:536px;background:#000;border:1px solid var(--hair,rgba(255,255,255,.14));
 opacity:0;transform:translateX(24px);visibility:hidden;transition:opacity .5s var(--ease,ease),transform .7s var(--ease,ease),visibility 0s linear .7s;z-index:4}
body.l5.s5market .side5{opacity:1;transform:none;visibility:visible;transition:opacity .5s var(--ease,ease) .15s,transform .7s var(--ease,ease),visibility 0s}
body.l5.s5media .media:not(.full){left:auto;top:64px;right:var(--m,48px);width:var(--s5w);height:536px}

/* live browser (OBS capture): the box is a transparent window with the same frame + caption; capture the operator's browser in OBS behind it */
.media.capture{background:transparent}.media.capture .mstage{background:transparent}.media.capture .mcap{background:#000}
body.l5.s5left.s5>.cams{left:calc(var(--m,48px) + var(--s5w) + 8px);right:var(--m,48px)}
body.l5.s5left .side5{right:auto;left:var(--m,48px);transform:translateX(-24px)}body.l5.s5left.s5market .side5{transform:none}
body.l5.s5left.s5media .media:not(.full){right:auto;left:var(--m,48px)}

/* ----- panels mode (all layouts): camera row narrows, side panels slide in at its edges ----- */
body{--cl:48px;--cr:48px;--pw:560px}body.l2{--cl:416px;--cr:416px;--pw:352px}
body>.cams{transition:left .7s var(--ease,ease),right .7s var(--ease,ease)}
body.pnR>.cams{right:calc(var(--cr) + var(--pw) + 8px)!important}body.pnL>.cams{left:calc(var(--cl) + var(--pw) + 8px)!important}
.pnl{position:absolute;top:64px;height:536px;width:var(--pw);background:#000;border:1px solid var(--hair,rgba(255,255,255,.14));z-index:4;overflow:hidden;
 opacity:0;visibility:hidden;transition:opacity .5s var(--ease,ease),transform .7s var(--ease,ease),visibility 0s linear .7s}
.pnl.r{right:var(--cr);transform:translateX(24px)}.pnl.l{left:var(--cl);transform:translateX(-24px)}
.pnl.on:not(.pmedia){opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease,ease) .15s,transform .7s var(--ease,ease),visibility 0s}
.pnl.pmedia{border-color:transparent}
.pnl .pp{position:absolute;inset:0;display:flex;flex-direction:column;padding:24px;gap:16px;text-transform:none}
.pnl .ph{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--hair,rgba(255,255,255,.14));font:300 13px var(--sans);letter-spacing:.24em;color:var(--mut,#838b88)}
.pnl .ph span:last-child{font:400 22px var(--sans);letter-spacing:0;color:#fff}
.pnl .pu{font:300 16px var(--sans);letter-spacing:.04em;color:var(--acc)}
.pnl .pb{font:300 26px/1.35 var(--sans);letter-spacing:.01em;color:#fff;overflow:hidden;display:-webkit-box;-webkit-line-clamp:9;-webkit-box-orient:vertical}
body.l2 .pnl .pb{font-size:20px}
.pnl.empty .pu{color:var(--mut,#838b88)}
body.pnpost .feat{display:none}
body.pnL.pnR{--pw:400px}body.l2.pnL.pnR{--pw:264px}
body.pnL .cam .lt,body.pnR .cam .lt{padding-left:16px;padding-right:16px}body.pnL.pnR .cam .badge{display:none}
/* layout 4 + panel: cameras become a 2x2 grid on the left, one panel on the right (left panel not used in layout 4) */
body.l4{--pw:868px}
body.l4.pnR>.cams{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:8px}
body.l4.pnR .cam .lt{padding-top:24px;padding-bottom:12px}
.cams.regrid{animation:regrid .6s var(--ease,ease)}@keyframes regrid{0%{opacity:.15}100%{opacity:1}}