/* Roomzik — the stage, and its miniatures in the switchboard. Sizes are in
   container units (cqh / cqw) so a preview is an exact scaled copy. */

.comp { position: relative; overflow: hidden; background: #000; container-type: size; }
.comp .cell { position: absolute; box-sizing: border-box; }
.comp .cell.gl { padding-left: .25cqw; }
.comp .cell.gr { padding-right: .25cqw; }
.comp .cell.gt { padding-top: .25cqw; }
.comp .cell.gb { padding-bottom: .25cqw; }
.comp .cell > video, .comp .cell > img, .comp .cell > .wait {
  display: block; width: 100%; height: 100%; object-fit: contain; background: #000;
}
.comp .cell > .wait { display: flex; align-items: center; justify-content: center; color: #6B7280; font-size: 2.4cqh; }
.comp .cell.floating { z-index: 2; padding: 0; }
.comp .cell.floating > video, .comp .cell.floating > img, .comp .cell.floating > .wait {
  border-radius: 1.4cqh; box-shadow: 0 1cqh 4cqh rgba(0, 0, 0, .6), 0 0 0 .25cqh rgba(255, 255, 255, .14);
}
.comp .cell.floating.vacant { pointer-events: auto; }

/* Name labels ("Show names on projector") */
.comp .name {
  position: absolute; left: 1.6cqh; bottom: 1.6cqh; z-index: 3; max-width: 70%;
  padding: .6cqh 1.4cqh; border-radius: 1cqh; background: rgba(14, 15, 19, .78);
  color: #F3F4F6; font: 600 2.2cqh/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; backdrop-filter: blur(8px);
}
.comp .name[hidden] { display: none; }
.comp .cell.floating .name { left: 1.2cqh; bottom: 1.2cqh; font-size: 1.8cqh; }

/* The trainer's pen strokes, over the pictures and under the join card */
.comp > canvas.ink { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }

/* Join card */
.comp .joincard {
  position: absolute; inset: 0; z-index: 10; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 9, 12, .80); backdrop-filter: blur(1.4cqh);
  opacity: 0; pointer-events: none; transition: opacity .35s ease;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #F3F4F6;
}
.comp .joincard.on { opacity: 1; }
.comp .jc-box {
  display: flex; align-items: center; gap: 6cqh; padding: 5.5cqh 6.5cqh;
  background: #16181E; border: .15cqh solid #262A33; border-radius: 3.2cqh;
  box-shadow: 0 3cqh 10cqh rgba(0, 0, 0, .55);
  transform: translateY(6cqh) scale(.98); transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.comp .joincard.on .jc-box { transform: none; }
.comp .jc-qr { width: 46cqh; height: 46cqh; padding: 2.2cqh; background: #fff; border-radius: 2.4cqh; box-sizing: border-box; flex: none; }
.comp .jc-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.comp .jc-text { display: flex; flex-direction: column; gap: 2.6cqh; min-width: 0; }
.comp .jc-title { font-size: 6.4cqh; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.comp .jc-step { display: flex; gap: 1.8cqh; align-items: flex-start; font-size: 2.8cqh; color: #9AA3AF; line-height: 1.35; }
.comp .jc-step b { color: #F3F4F6; font-weight: 600; }
.comp .jc-n {
  flex: none; width: 4cqh; height: 4cqh; border-radius: 50%; background: #5B8CFF; color: #fff;
  font-size: 2.3cqh; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: -.2cqh;
}
.comp .jc-url { color: #F3F4F6; font-size: 3.5cqh; font-weight: 600; letter-spacing: -.01em; margin-top: .4cqh; }
.comp .jc-room { display: flex; align-items: baseline; gap: 2cqh; margin-top: .6cqh; }
.comp .jc-room span { font-size: 2.6cqh; color: #9AA3AF; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }
.comp .jc-room b { font-size: 10cqh; font-weight: 750; letter-spacing: .08em; line-height: 1; font-variant-numeric: tabular-nums; }
.comp .jc-phone { font-size: 2.3cqh; color: #9AA3AF; padding-top: 2.4cqh; border-top: .15cqh solid #262A33; }
.comp .jc-phone b { color: #F3F4F6; font-weight: 600; }
.comp .jc-phone[hidden] { display: none; }

/* The stage window itself */
body.stage { margin: 0; height: 100vh; background: #000; overflow: hidden; }
body.stage.projector { cursor: none; }
body.stage > .comp { position: absolute; inset: 0; }