/* SLYVREN · TRANSMISSION — the top-right box. Fills its column (320px on the site). Catppuccin Mocha.
   Fonts: "Share Tech Mono" and "Big Shoulders Display" (the site already loads both). */

.tx { position: relative; z-index: 4; box-sizing: border-box; border: 1px solid var(--line); background: rgba(var(--bg-2-rgb), .88); color: var(--text);
  font-family: "Share Tech Mono", ui-monospace, monospace; line-height: normal; }   /* own line height, whatever the page uses */
.tx *, .tx *::before, .tx *::after { box-sizing: border-box; }

/* header: TRANSMISSION · ON/OFF AIR */
.tx-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: .2em; color: var(--text-4); }
.tx-air { display: flex; align-items: center; gap: 8px; color: var(--text-6); }
.tx-air i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--text-6); }
.tx-air b { font-weight: 400; }
.tx.is-live .tx-air { color: var(--alert); }
.tx.is-live .tx-air i { background: var(--alert); }

/* panes sit on top of each other, so the box never changes height as it ticks */
.tx-body { position: relative; }
.tx-stack { display: grid; }
.tx-pane { grid-area: 1 / 1; min-width: 0; visibility: hidden; }
.tx-pane.is-on { visibility: visible; }

/* the screen: 16:9 with the static texture behind whatever is on it */
.tx-screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(0deg, rgba(var(--text-rgb), .07) 0 1px, transparent 1px 2px),
              repeating-linear-gradient(90deg, rgba(var(--text-rgb), .04) 0 1px, transparent 1px 3px), var(--bg-3); }
.tx-fill { position: absolute; inset: 0; margin: 0; }
.tx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tx-img.is-broken { display: none; }

/* live thumbnail */
.tx-live { display: block; color: inherit; text-decoration: none; }
.tx-badge { position: absolute; left: 0; top: 0; padding: 5px 9px; font-size: 11px; letter-spacing: .2em; background: var(--alert); color: var(--bg-4); }
.tx-viewers { position: absolute; right: 0; top: 0; padding: 5px 9px; font-size: 11px; letter-spacing: .12em; background: rgba(var(--bg-rgb), .8); color: var(--text); }
.tx-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 10px; font-size: 11px; letter-spacing: .16em; background: rgba(var(--bg-rgb), .8); color: var(--text); }
.tx-live:hover .tx-bar, .tx-live:focus-visible .tx-bar { color: var(--hilite); }

/* video thumbnail with play */
.tx-vid { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; }
.tx-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: linear-gradient(0deg, rgba(var(--bg-rgb), .75), transparent); }
.tx-tri { position: relative; fill: var(--dim); }
.tx-img ~ .tx-tri { fill: var(--text); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.tx-vid:hover .tx-tri, .tx-vid:focus-visible .tx-tri { fill: var(--accent); }
.tx-dur { position: absolute; right: 8px; bottom: 8px; padding: 3px 7px; font-size: 11px; letter-spacing: .1em; background: var(--bg-4); color: var(--text); }
.tx-frame { position: absolute; inset: 0; background: #000; }
.tx-frame[hidden] { display: none; }
.tx-screen > .tx-frame.is-err {   /* failed video: same static texture as the screen */
   background: repeating-linear-gradient(0deg, rgba(var(--text-rgb), .07) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(var(--text-rgb), .04) 0 1px, transparent 1px 3px), var(--bg-3); }
.tx-frame iframe, .tx-frame video { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.tx-frame video { object-fit: contain; }

/* now spinning */
.tx-spin { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; padding: 0 18px; }
.tx-cover { display: block; width: 124px; height: 124px; object-fit: cover; border: 1px solid var(--line); background: var(--bg-4); }
.tx-bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.tx-bars i { display: block; width: 6px; background: var(--accent); }

/* bea */
.tx-bea { object-position: 50% 30%; }
.tx-cap { position: absolute; left: 0; bottom: 0; padding: 5px 9px; font-size: 11px; letter-spacing: .16em; background: rgba(var(--bg-rgb), .8); color: var(--tx-title, var(--title)); }

/* lists: krew board, schedule */
.tx-list { list-style: none; display: flex; flex-direction: column; justify-content: center; padding: 14px 16px 0; font-size: 12px; }
.tx-krew { gap: 9px; line-height: 1.35; }
.tx-krew li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
.tx-krew b { font-weight: 400; color: var(--accent); }
.tx-sched { gap: 9px; letter-spacing: .06em; text-transform: uppercase; }
.tx-sched li { display: grid; grid-template-columns: 10px 44px 74px minmax(0, 1fr); gap: 8px; color: var(--text-5); }
.tx-what { color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-sched li.is-next { color: var(--accent); }
.tx-sched li.is-next .tx-what { color: var(--tx-title, var(--title)); }
.tx-sched li.is-break { color: var(--text-6); }
.tx-sched li.is-break .tx-what { color: var(--text-4); }

/* coming up: the next video's premiere date, or COMING SOON */
.tx-soon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 0 16px; }
.tx-soon-k { font-size: 11px; letter-spacing: .3em; color: var(--text-5); }
.tx-soon-big { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 300; font-size: 44px; line-height: .95; letter-spacing: .08em; color: var(--tx-title, var(--title)); }
.tx-soon-s { font-size: 12px; letter-spacing: .24em; color: var(--accent); }

/* quake live server */
/* the loaded map behind it, faded toward the background where the text sits (left) */
.tx-mapbg { z-index: 0; }
.tx-mapbg .tx-img, .tx-mapbg canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tx-mapbg[data-style="duotone"].is-drawn .tx-img { visibility: hidden; }
.tx-mapbg[data-style="photo"] .tx-img { filter: brightness(.75); }
.tx-mapbg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--bg-rgb), var(--tx-map-fade, .8)) 0%, rgba(var(--bg-rgb), calc(var(--tx-map-fade, .8) * .44)) 55%, rgba(var(--bg-rgb), calc(var(--tx-map-fade, .8) * .56)) 100%); }
.tx-mapbg + .tx-ql { z-index: 1; }
/* over a map: a soft shadow in the theme's background colour keeps the text clear on bright patches */
.tx-mapbg + .tx-ql :is(.tx-up, .tx-map, .tx-mode, .tx-top) { text-shadow: 0 0 2px rgb(var(--bg-rgb)), 0 0 5px rgb(var(--bg-rgb)), 0 0 10px rgba(var(--bg-rgb), .95), 0 0 18px rgba(var(--bg-rgb), .75); }
.tx-mapbg + .tx-ql .tx-mode { color: var(--tx-map-mode, var(--text-5)); }
.tx-mapbg + .tx-ql .tx-map { color: var(--tx-map-title, var(--tx-title, var(--title))); }
.tx-mapbg + .tx-ql .tx-top li { color: var(--tx-map-text, var(--text)); }
.tx-mapbg + .tx-ql .tx-slots { filter: drop-shadow(0 0 3px rgba(var(--bg-rgb), .9)); }
.tx-ql { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 12px; padding: 18px 14px 0; }
.tx-qlm { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tx-up { font-size: 11px; letter-spacing: .2em; color: var(--ok); }
.tx-map { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: .02em;
  color: var(--tx-title, var(--title)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-mode { font-size: 11px; letter-spacing: .2em; color: var(--text-5); }
.tx-slots { display: flex; flex-wrap: wrap; gap: 4px; }
.tx-slots i { display: block; width: 10px; height: 10px; background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--text-rgb), var(--tx-slot-edge, .45)); }   /* free: an outline */
.tx-slots i.on { background: var(--ok); box-shadow: inset 0 0 0 1px rgba(var(--bg-rgb), .55); }                                          /* taken: filled */
.tx-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 12px; letter-spacing: .06em; }
.tx-top li { display: flex; justify-content: space-between; gap: 8px; color: var(--text); }
.tx-top li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-top b { font-weight: 400; color: var(--accent); }

/* plain messages: no feed, server offline. Still, no animation. */
.tx-msg { display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 12px; letter-spacing: .06em; white-space: pre; }
.tx-warn { color: var(--alert); }

/* rotation controls: ‹ dots › in the screen's top corner (shown once the script runs) */
.tx-ctl { position: absolute; right: 6px; top: 6px; z-index: 5; display: none; align-items: center; background: rgba(var(--bg-rgb), .82); border: 1px solid var(--line); }
.tx.tx-js .tx-ctl { display: flex; }
.tx.is-playing .tx-ctl { display: none; }
.tx-arw { width: 24px; height: 22px; padding: 0; border: 0; background: none; color: var(--text-3); font: 15px/1 "Share Tech Mono", ui-monospace, monospace; cursor: pointer; }
.tx-arw:hover, .tx-arw:focus-visible { color: var(--hilite); }
.tx-dot { display: flex; align-items: center; justify-content: center; width: 13px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.tx-dot i { display: block; width: 6px; height: 6px; background: var(--text-6); }
.tx-dot[aria-current="true"] i { background: var(--accent); }
.tx-dot:hover i, .tx-dot:focus-visible i { outline: 1px solid var(--hilite); }
.tx button:focus-visible, .tx a:focus-visible { outline: 1px solid var(--hilite); outline-offset: -1px; }

/* text under the screen: same height on every pane */
.tx-info { display: flex; flex-direction: column; gap: 6px; min-height: 154px; padding: 16px; }
.tx-kicker { font-size: 12px; letter-spacing: .2em; color: var(--text-5); }
.tx-title { font-family: "Big Shoulders Display", "Arial Narrow", sans-serif; font-weight: 600; font-size: 28px; line-height: 1.05; letter-spacing: .04em;
  color: var(--tx-title, var(--title)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* room for descenders (g, y, j) inside the clip, without changing the layout */
.tx-title { padding-bottom: .14em; margin-bottom: -.14em; }
.tx-map { padding-bottom: .22em; margin-bottom: -.22em; }        /* same for the map name (tighter line height) */
.tx-sub { font-size: 13px; letter-spacing: .06em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-act { align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; letter-spacing: .14em;
  color: var(--accent); text-decoration: none; cursor: pointer; }
.tx-act:hover, .tx-act:focus-visible { color: var(--hilite); }
.tx-next { font-size: 12px; letter-spacing: .14em; color: var(--text-5); }
.tx-next b { font-weight: 400; color: var(--text); }