/* =====================================================================
   JUST CHATTING  --  2560 x 1440
   Camera links als transparant gat, chat rechts. Zelfde stanstruc als de
   onderbalk: je OBS camera-source ligt achter deze browser source.

   Camera-rechthoek:  x 60   y 196   1650 x 930
   ===================================================================== */

html,body{width:100vw;height:100vh;background:transparent;overflow:hidden}
#stage{position:absolute;top:0;left:0;transform-origin:0 0;overflow:hidden}

.ground{position:absolute;inset:0;z-index:1;pointer-events:none}
.ground__hole{
  position:absolute;left:60px;top:196px;width:1650px;height:930px;
  box-shadow:0 0 0 3000px var(--ink-900);
}
/* schuine hoek rechtsonder: driehoekje grondkleur binnen het gat, zelfde
   30px als de kaarten ernaast */
.ground__hole::after{
  content:'';position:absolute;right:0;bottom:0;width:30px;height:30px;
  background:var(--ink-900);clip-path:polygon(100% 0,100% 100%,0 100%);
}
.ground__frame{
  position:absolute;left:60px;top:196px;width:1650px;height:930px;
  fill:none;stroke:var(--jade);stroke-opacity:.38;stroke-width:2;
}

.jc{position:relative;z-index:2;width:100%;height:100%}

/* ---- bovenbalk ------------------------------------------------------ */
.jc__top{
  position:absolute;left:60px;top:52px;width:2440px;height:112px;
  display:flex;align-items:center;gap:20px;
}
.jc__title{
  font-size:40px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;
}
.jc__top .rib{--rib-h:58px;--rib-cut:18px}

/* ---- naamplaatje op de camera --------------------------------------- */
.jc__plate{position:absolute;left:88px;top:1010px}
.jc__plate .rib{--rib-h:52px;--rib-cut:17px}

/* gebeurtenisbalk over de onderrand van de camera -- daar is ruimte zat */
.jc__plate{transition:opacity 240ms var(--ease)}
.jc__cam.busy .jc__plate{opacity:0}
.camev{
  position:absolute;left:88px;top:1010px;width:1594px;z-index:4;
  transform:translateY(150%);opacity:0;
  transition:transform 420ms var(--ease), opacity 260ms var(--ease);
}
.camev.on{transform:none;opacity:1}
.camev .rib{--rib-h:64px;--rib-cut:20px}
.camev .rib__val{font-size:30px}

/* alleen met ?demo=1, anders zou het over je cam liggen */
.jc__camhint{
  position:absolute;left:60px;top:196px;width:1650px;height:930px;
  display:none;place-items:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
  background:var(--ink-850);color:var(--ink-500);
  font-size:16px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
}
body.demo .jc__camhint{display:grid}

/* ---- chat rechts ---------------------------------------------------- */
.jc__chat{position:absolute;left:1740px;top:185px;width:760px;height:1195px}
/* de wrapper krimpt anders naar zijn inhoud */
.jc__chat .rcard-wrap,
.jc__strip .rcard-wrap{height:100%}
.jc__chat .rcard__in{padding:30px 0 26px}
#jcChat{
  flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:13px;
  padding:0 30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 46px,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 46px,#000 100%);
}
/* Een chatregel is tekst, geen rij vakjes. Als flexrij bleven badge en naam
   op de eerste regel staan terwijl de tekst in een eigen kolom viel: onder
   naam en badge een gat, en bij een bericht van drie regels zakte de badge
   naar het midden van de rij (align-self:center op een rij die meegroeit).
   Inline laten lopen wrapt zoals chat hoort te wrappen: de tweede regel
   begint gewoon links. */
#jcChat .msg{font-size:25px;line-height:1.33}
#jcChat .msg__badges{display:inline-flex;gap:5px;margin-right:9px;vertical-align:3px}
#jcChat .bdg{
  font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 8px;
  clip-path:polygon(0 0,100% 0,calc(100% - 5px) 100%,0 100%);
  background:var(--ink-600);color:var(--ink-200);
  text-transform:uppercase;
}
#jcChat .bdg--broadcaster{background:var(--jade);color:var(--ink-900)}
#jcChat .bdg--moderator  {background:var(--jade-deep);color:var(--paper)}
#jcChat .bdg--vip        {background:var(--rose);color:var(--ink-900)}
#jcChat .msg__name{font-weight:600;margin-right:9px}
#jcChat .msg__body{color:var(--paper-dim);overflow-wrap:break-word}
#jcChat .msg__body img.emote{height:30px;vertical-align:-8px}

/* ---- strook onder de camera ----------------------------------------- */
.jc__strip{position:absolute;left:60px;top:1139px;width:1650px;height:241px}
/* De twee groepen verdelen zich over de breedte in plaats van links te
   klitten met een gat van 900px ernaast. De scheidslijn valt zo tussen de
   twee groepen in het midden. */
.jc__strip .rcard__in{
  padding:28px 34px;flex-direction:row;align-items:center;
  justify-content:space-between;gap:38px;
}
.jc__cols{display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
.jc__cols .rib{--rib-h:44px;--rib-cut:14px;max-width:100%}
.jc__div{width:1px;align-self:stretch;background:var(--ink-700);flex:0 0 1px;margin:4px 0}
/* geen flex:1 hier: dan slokt deze kolom de vrije ruimte op en heeft
   space-between hierboven niets te verdelen */
.jc__recent{min-width:0}
.jc__empty{color:var(--ink-500);font-size:20px}