/* THE ROOM · 1102k · SCREEN — CAM · GPS · SCREEN across the top of the live panel */
#live.k3 .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) minmax(0, 1.18fr); height: clamp(150px, 22vw, 300px); }
#live.k3.scr-on .tiles { grid-template-columns: minmax(0, .8fr) minmax(0, .62fr) minmax(0, 1.58fr); height: clamp(170px, 27vw, 380px); }
#scrTile { background: #05060a; }
#scrTile video, #scrTile img.frame { object-fit: contain !important; background: #000; }
#scrTile.mine video { display: block; }
#scrTile.mine img.frame { display: none !important; }
#scrTile .cap.hot { background: linear-gradient(90deg, rgba(58,120,255,.92), rgba(34,211,107,.85)) !important; }
#scrTile .seen { position: absolute; right: 8px; bottom: 8px; z-index: 2; font: 600 8.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; color: #fff; padding: 5px 7px; border-radius: 6px; background: rgba(0,0,0,.62); border: 1px solid rgba(58,120,255,.45); }
#scrTile .seen:empty { display: none; }
#live.scr-on #scrTile { box-shadow: inset 0 0 0 1px rgba(58,120,255,.55), inset 0 0 40px rgba(58,120,255,.12); }
#scrBtn.on { color: #fff !important; border-color: var(--blue) !important; background: rgba(58,120,255,.2) !important; }
@media (max-width: 640px) {
  #live.k3 .tiles, #live.k3.scr-on .tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: clamp(260px, 64vw, 420px); }
  #scrTile { grid-column: 1 / -1; }
  #live .ctl #scrBtn { flex: 1; padding: 11px 6px; }
}