/* The lens: 600 × 600, pure black (black is transparent on an additive
   display). Floating content — no boxes, cards or borders. White for content,
   grey for context, and ONE accent, cyan, for "on / now": the current source,
   sound on, just saved. No yellow. */
:root {
  --white: #F2F2F2;
  --grey: #7D838C;
  --dim: #4A4F57;
  --live: #5CE1E6;
  --black: #000000;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--black); }
body { position: relative; width: 600px; height: 600px; overflow: hidden; font-family: 'Figtree', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ---- fixed media layers (under the text) ---- */
.players { position: absolute; top: 0; left: 131px; width: 338px; height: 600px; z-index: 1; display: none; }
.players iframe { position: absolute; inset: 0; width: 338px; height: 600px; border: 0; visibility: hidden; background: var(--black); }
.players iframe.on { visibility: visible; }
body.show-short .players { display: block; }

.rvid { position: absolute; top: 72px; left: 34px; width: 532px; height: 300px; z-index: 1; object-fit: contain; background: var(--black); display: none; }
body.show-video .rvid { display: block; }

/* ---- text layer ---- */
.lens {
  position: absolute; inset: 0; z-index: 2;
  width: 600px; height: 600px;
  padding: 26px 34px 26px;
  color: var(--white);
  display: flex; flex-direction: column;
  pointer-events: none;
}

.hdr { display: flex; align-items: flex-start; gap: 12px; min-height: 24px; flex-shrink: 0; }
.tags { display: flex; flex-direction: column; gap: 4px; max-width: 97px; }
.src { font-size: 15px; font-weight: 700; letter-spacing: 0.16em; color: var(--live); }
.demo, .stale { font-size: 12px; line-height: 1.2; font-weight: 700; letter-spacing: 0.16em; color: var(--grey); }
.dots { margin-left: auto; display: flex; gap: 8px; padding-top: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.dot.on { background: var(--live); }

.foot { margin-top: auto; display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: var(--grey); flex-shrink: 0; }
.hint.on { color: var(--live); }
.count { font-variant-numeric: tabular-nums; }

.meta { font-size: 19px; color: var(--grey); line-height: 1.3; }

/* ---- news ---- */
.news { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.headline { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.headline.xl { font-size: 44px; -webkit-line-clamp: 5; }
.headline.l { font-size: 37px; -webkit-line-clamp: 6; }
.headline.m { font-size: 31px; -webkit-line-clamp: 7; }

/* ---- reddit ---- */
.reddit { flex-grow: 1; display: flex; flex-direction: column; min-height: 0; }
.reddit:not(.has-media) { justify-content: center; gap: 16px; }
.media { margin-top: 22px; height: 300px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pic { max-width: 532px; max-height: 300px; object-fit: contain; display: block; }
body.show-video .pic { visibility: hidden; }
.rt { margin: 16px 0 6px; font-size: 26px; font-weight: 700; line-height: 1.15; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.selftext { margin: 0; font-size: 20px; line-height: 1.35; color: var(--grey); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }

/* ---- shorts: the video is 338 px wide in the middle; text in the gutters ---- */
.shorts { position: absolute; inset: 0; }
.gut { position: absolute; bottom: 26px; width: 92px; display: flex; flex-direction: column; gap: 6px; }
.gl { left: 28px; }
.gr { right: 28px; align-items: flex-end; text-align: right; }
.chan { font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--white); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.when, .gut .count, .gut .hint { font-size: 14px; color: var(--grey); }
.snd { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; color: var(--grey); }
.snd.on { color: var(--live); }
.sfail { position: absolute; left: 131px; width: 338px; top: 0; height: 600px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 22px; font-weight: 600; padding: 0 20px; }

/* ---- messages (loading, offline, not connected, empty) ---- */
.msg { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 0 20px; }
.mtitle { font-size: 32px; font-weight: 700; line-height: 1.15; }
.mdetail { font-size: 19px; color: var(--grey); line-height: 1.3; }

/* ---- toast ---- */
.toast { position: absolute; left: 0; right: 0; bottom: 60px; text-align: center; font-size: 22px; font-weight: 700; color: var(--live); }
.toast:empty { display: none; }