/* iomega · live.css — EXPERIMENTAL event room (/live/). Analogue look,
   self-contained: only this page loads it. Delete with the experiment. */

body.page-live {
  background: #000;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}
body.page-live section { display: block; }

.live {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: clamp(16px, 3vh, 30px) clamp(16px, 4vw, 30px)
           calc(env(safe-area-inset-bottom, 0px) + 18px);
  gap: 14px;
}
.live-cat { margin: 0; font-size: 12px; color: #555; }
.live-title { margin: 2px 0 0; font-size: clamp(26px, 6vw, 40px); font-weight: 700; letter-spacing: -0.02em; }
.live-count { margin: 4px 0 0; font-size: 15px; color: #9a9a9a; }

/* the room: a thin white outline, stars inside */
.room {
  position: relative;
  flex: 1;
  min-height: 340px;
  border: 1px solid #2a2a2a;
  border-radius: 18px;
  overflow: hidden;
}

.node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: drift 14s ease-in-out infinite alternate;
}
.node-star {
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #fff;
}
.node-star span {
  font-weight: 750;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: #000;
  transform: translateY(14%);
}
.node-name { font-size: 12px; font-weight: 600; color: #fff; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-zone { font-size: 10px; color: #555; }
.node.is-new { animation: node-slam 340ms cubic-bezier(0.16, 1.1, 0.3, 1) both, drift 14s ease-in-out 1s infinite alternate; }
@keyframes node-slam {
  from { opacity: 0; transform: translate(-50%, -50%) scale(2.6); filter: blur(3px); }
  62%  { opacity: 1; transform: translate(-50%, -50%) scale(0.94); filter: blur(0); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes drift {
  from { margin-left: -8px; margin-top: -5px; }
  to   { margin-left: 8px; margin-top: 6px; }
}

.zone-mark {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #333;
  pointer-events: none;
}

.live-foot { margin: 0; font-size: 14px; color: #9a9a9a; text-align: center; }

/* ---------- &tv=1 — NTSC 4:3 CRT output ----------
   A real CRT overscans (~7% of every edge is cropped), interlace makes 1px
   lines and small text flicker, and 100% white blooms. So: a locked 4:3 stage,
   title-safe margins, thick strokes, big type, broadcast-safe near-white. */
body.page-live.is-tv { display: grid; place-items: center; overflow: hidden; }
body.page-live.is-tv .live {
  width: min(100vw, calc(100vh * 4 / 3));
  aspect-ratio: 4 / 3;
  min-height: 0;
  height: auto;
  padding: 7% 8%;                 /* title-safe: everything lives inside the crop */
  gap: 10px;
  color: #e8e8e8;                 /* never 100% white on composite */
}
body.page-live.is-tv .live-cat { display: none; }
body.page-live.is-tv .live-title { font-size: 34px; color: #e8e8e8; }
body.page-live.is-tv .live-count { font-size: 22px; color: #b8b8b8; }
body.page-live.is-tv .room { border: 3px solid #4a4a4a; border-radius: 12px; min-height: 0; }
body.page-live.is-tv .node-star { width: 58px; background: #e8e8e8; }
body.page-live.is-tv .node-star span { font-size: 16px; }
body.page-live.is-tv .node-name { font-size: 17px; color: #e8e8e8; max-width: 130px; }
body.page-live.is-tv .node-zone { font-size: 14px; color: #8a8a8a; }
body.page-live.is-tv .zone-mark { font-size: 14px; color: #5a5a5a; }
body.page-live.is-tv .live-foot { display: none; }