/* KantineTV player, built to the KantineTV TV design (design/ui_kits/tv_player + design/tokens/tv.css).
   Everything is viewport-relative (vmin) so one layout serves 720p, 1080p and 4K; nothing renders below
   ~24px at 1080p (1.9vmin). Inside .fit the sizes are em against the item size (2.6vmin), so fit() shrinks
   a whole slide at once. No inset/min()/flex-gap: older smart-TV browsers have to run this. */
:root {
  --primary: #0b4f8a;
  --secondary: #f2c230;
  --on-primary: #fff;
  --on-secondary: #000;
  /* Derived from the club colours by player.js: readable on a light page, on near-black, on the club colour. */
  --accent-primary: #0b4f8a;
  --accent-dark: #f2c230;
  --accent-on-primary: #f2c230;
  --chip-bg: #f2c230;
  --chip-fg: #000;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --kt-green: #0e6e3e;
  --kt-green-dark: #07321c;
  --kt-amber: #f5b93a;
}
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; cursor: none; }
/* Club fonts (fonts.css), set by player.js; unset = the system font */
body { font-family: var(--font-body, var(--font-system)); }
h2, .club-name, .price, .pname, .plabel, .clock-time, .clock-date, .fallback-name, .cap-name, .when-day, .when-date, .when-time {
  font-family: var(--font-heading, var(--font-body, var(--font-system)));
}
#app {
  /* Theme slots. These defaults are the "clean" theme. */
  --page: #f6f6f3; --ink: #17171a; --ink-muted: #5d5a54;
  --panel: #fff; --panel-border: rgba(23, 23, 26, .10); --panel-pad: .92em;
  --bar-bg: var(--primary); --bar-fg: var(--on-primary);
  --cat-ink: var(--accent-primary); --cat-rule: rgba(23, 23, 26, .12);
  --price-ink: #17171a; --accent: var(--accent-primary);
  --shadow: 0 .3vmin 1.2vmin rgba(23, 23, 26, .07);
  --caption-bg: rgba(255, 255, 255, .94); --caption-fg: #17171a;
  --logo-base: 7.5vmin;
  box-sizing: border-box; width: 100vw; height: 100vh; overflow: hidden; position: relative;
  display: flex; flex-direction: column; background: var(--page); color: var(--ink);
}

/* "Powered by KantineTV": small, bottom-right on every content screen; Club+ can switch it off. One style for all
   themes: the dark pill reads on any background. Top edge at 4vmin stays below the 4.2vmin content gutter. */
.kt-badge { position: absolute; right: 1.2vmin; bottom: 1vmin; z-index: 5; box-sizing: border-box; height: 3vmin;
  display: flex; align-items: center; padding: 0 1.1vmin; border-radius: .8vmin; background: rgba(0, 0, 0, .45);
  color: #fff; font-family: "Poppins", var(--font-system); font-size: 1.9vmin; line-height: 1; white-space: nowrap; pointer-events: none; }
.kt-badge img { width: 2.1vmin; height: 2.1vmin; margin-right: .7vmin; display: block; }
.kt-badge b { font-weight: 700; color: var(--kt-amber); }

/* ---- KantineTV system screens: pairing, verbinden, gekoppeld-maar-niets-gepland. The full KantineTV
   screens; content screens belong to the club and carry only the small badge above. ---- */
#app.system {
  background: var(--kt-green-dark);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 .2vmin, transparent .2vmin 9vmin),
    linear-gradient(160deg, var(--kt-green) 0%, var(--kt-green-dark) 100%);
  color: #fff; padding: 5.5vmin; font-family: "Poppins", var(--font-system);
}
.sys-top { flex: none; display: flex; align-items: flex-start; justify-content: space-between; }
.sys-note { font-size: 2vmin; color: rgba(255, 255, 255, .66); }
.sys-main { flex: 1; min-height: 0; display: flex; align-items: center; }
.sys-foot { flex: none; font-size: 2vmin; color: rgba(255, 255, 255, .55); }
.kt-lockup { display: flex; align-items: center; }
.kt-lockup img { width: 5vmin; height: 5vmin; display: block; margin-right: 1.7vmin; }
.kt-lockup span { font-size: 3.1vmin; letter-spacing: -.015em; line-height: 1; }
.kt-lockup b { font-weight: 700; color: var(--kt-amber); }
.system h1 { margin: 0; font-size: 8.6vmin; font-weight: 700; line-height: 1.03; letter-spacing: -.025em; }
.system p { margin: 2.6vmin 0 0; font-size: 3.2vmin; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.sys-block { max-width: 110vmin; }
.sys-chip {
  display: inline-block; padding: .5vmin 1.8vmin; border-radius: 2vmin; background: var(--kt-amber); color: #1a1917;
  font-weight: 700; font-size: 2vmin; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2.6vmin;
}
.pair { display: flex; align-items: center; width: 100%; }
.pair-code { flex: none; margin-right: 7vmin; }
.pair-label { font-size: 2.4vmin; letter-spacing: .16em; text-transform: uppercase; color: var(--kt-amber); font-weight: 700; }
.code-cells { margin-top: 2.2vmin; white-space: nowrap; }
.code-cell {
  display: inline-block; width: 9.6vmin; height: 13vmin; line-height: 13vmin; text-align: center; margin-right: 1.6vmin;
  border-radius: 1.4vmin; background: rgba(255, 255, 255, .10); border: .25vmin solid rgba(255, 255, 255, .28);
  font-size: 9.2vmin; font-weight: 700; box-sizing: border-box;
}
.code-cell:last-child { margin-right: 0; }
.pair-hint { margin-top: 2.2vmin; font-size: 2.2vmin; color: rgba(255, 255, 255, .7); }
.pair-steps { flex: 1; min-width: 0; }
.pair-steps .step { display: flex; align-items: center; margin-bottom: 2.2vmin; font-size: 2.8vmin; }
.pair-steps .step:last-child { margin-bottom: 0; }
.step-n {
  flex: none; width: 5.2vmin; height: 5.2vmin; line-height: 4.7vmin; text-align: center; margin-right: 2vmin;
  border-radius: 50%; background: rgba(255, 255, 255, .12); border: .25vmin solid rgba(255, 255, 255, .3);
  font-size: 2.6vmin; font-weight: 700; box-sizing: border-box;
}

/* ---- Paired frame: club top bar + content area ---- */
.bar {
  flex: none; position: relative; height: 11vmin; display: flex; align-items: center; padding: 0 4.2vmin;
  background: var(--bar-bg); color: var(--bar-fg);
}
/* Logo size = the design's medium (7.5vmin) x the club's choice */
.bar .logo { height: calc(var(--logo-base) * var(--logo-scale, 1)); max-width: 25vw; object-fit: contain; margin-right: 2.2vmin; }
.bar.logo-small { --logo-scale: .73; }
.bar.logo-large { --logo-scale: 1.33; }
.bar-center { justify-content: center; }
.bar .club-text { min-width: 0; }
.bar .club-name { display: block; font-size: 3.4vmin; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .club-sub { display: block; font-family: var(--font-body, var(--font-system)); font-size: 1.9vmin; line-height: 1.2; opacity: .72; margin-top: .4vmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-clock { margin-left: auto; padding-left: 2.4vmin; font-size: 2.2vmin; opacity: .72; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-center .bar-clock { position: absolute; right: 4.2vmin; margin-left: 0; }
main { flex: 1; min-height: 0; position: relative; }
.fit {
  position: absolute; top: 4.2vmin; right: 4.2vmin; bottom: 4.2vmin; left: 4.2vmin; overflow: hidden;
  --s: 1; font-size: calc(var(--s) * 2.6vmin); line-height: 1.3;
}
h2 { margin: 0; }

/* Voortgangsbalk: how far the current item is through its turn. Purely declarative (the animation is
   started in the past by a negative delay), so every TV of a screen shows the same position. */
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: .55vmin; background: rgba(128, 128, 128, .18); }
.progress-fill {
  height: 100%; background: var(--accent); opacity: .9; transform-origin: left; transform: scaleX(0);
  -webkit-animation: ktv-progress linear both; animation: ktv-progress linear both;
}
@-webkit-keyframes ktv-progress { from { -webkit-transform: scaleX(0); } to { -webkit-transform: scaleX(1); } }
@keyframes ktv-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Prijslijst · lijst: category panels in columns; more content -> more columns -> fit() shrinks ---- */
.prices { height: 100%; column-width: 26em; column-gap: 1em; column-fill: auto; }
.cat {
  break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 .92em; padding: var(--panel-pad);
  background: var(--panel); border: .096em solid var(--panel-border); border-radius: .62em; box-shadow: var(--shadow);
}
.cat h2 {
  font-size: 1.15em; font-weight: 700; letter-spacing: .01em; color: var(--cat-ink);
  border-bottom: .083em solid var(--cat-rule); padding-bottom: .3em; margin-bottom: .4em;
}
/* Merged categories: one panel that may continue in the next column, only between rows and never right after a heading. */
.cat-merge { break-inside: auto; -webkit-column-break-inside: auto; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cat-merge li { break-inside: avoid; -webkit-column-break-inside: avoid; }
.cat-merge h2 { break-after: avoid; -webkit-column-break-after: avoid; }
.cat ul + h2 { margin-top: .7em; }
.cat ul { list-style: none; margin: 0; padding: 0; }
.cat li { display: flex; justify-content: space-between; align-items: baseline; padding: .38em 0; }
.cat .name { flex: 1; min-width: 0; padding-right: .54em; font-weight: 600; letter-spacing: -.005em; }
.price { font-size: 1.08em; font-weight: 700; color: var(--price-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Photo thumbnail slot (an empty span on the photoless rows of a category with photos) */
.cat .thumb { flex: none; width: 1.4em; height: 1.4em; object-fit: cover; border-radius: .3em; margin-right: .45em; align-self: center; }
/* Nieuw / Actie: Actie is filled in the club colour, Nieuw an outline, as in the design */
.plabel {
  display: inline-block; vertical-align: middle; margin-left: .46em; padding: .12em .62em; border-radius: 1em;
  font-size: .62em; font-weight: 700; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase;
  background: var(--chip-bg); color: var(--chip-fg); border: .14em solid transparent;
}
.plabel-nieuw, .theme-minimal .plabel { background: none; color: var(--accent); border-color: var(--accent); }
.pdesc { display: block; font-size: .73em; font-weight: 400; line-height: 1.25; margin-top: .1em; color: var(--ink-muted); }

/* A product card: the tiles of Tegels + lijst and Alleen tegels */
.pcard {
  display: flex; flex-direction: column; padding: .62em; border-radius: .62em;
  background: var(--panel); border: .096em solid var(--panel-border); box-shadow: var(--shadow);
}
.theme-minimal .pcard { border-color: var(--cat-rule); }
.pcard .pimg { display: block; width: 100%; height: 4.5em; object-fit: cover; border-radius: .4em; margin-bottom: .35em; }
.pcard .pname { font-weight: 600; line-height: 1.2; }
.pcard .price { margin-top: auto; padding-top: .25em; }

/* Tile grid: large tiles above the list (Tegels + lijst) or filling the screen (Alleen tegels). A tile with a photo gets the design's full-bleed treatment:
   the photo fills the tile and name/price sit on a scrim at the bottom. */
.pl-featured { height: 100%; display: flex; flex-direction: column; }
.featured { flex: none; display: grid; grid-template-columns: repeat(var(--fcols, 2), 1fr); gap: .77em; margin-bottom: .92em; }
.featured .pcard { min-height: 8.5em; }
.featured .pname { font-size: 1.1em; font-weight: 700; }
.featured .pcard-photo { position: relative; overflow: hidden; padding: 0; justify-content: flex-end; border: 0; }
.featured .pcard-photo .pimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; }
.featured .pcard-photo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72%;
  background: linear-gradient(180deg, rgba(15, 14, 13, 0) 0%, rgba(15, 14, 13, .86) 60%);
}
.featured .pcard-photo > .pname, .featured .pcard-photo > .pdesc, .featured .pcard-photo > .price {
  position: relative; z-index: 1; color: #fff; padding-left: .62em; padding-right: .62em;
}
.featured .pcard-photo > .pdesc { color: rgba(255, 255, 255, .82); }
/* On a photo the club accent has no guaranteed contrast: the chips go white over the scrim. */
.featured .pcard-photo .plabel-nieuw, .theme-minimal .featured .pcard-photo .plabel { color: #fff; border-color: rgba(255, 255, 255, .7); }
.featured .pcard-photo > .price { margin-top: 0; padding-bottom: .5em; }
.pl-featured .prices { height: auto; flex: 1; min-height: 0; }
/* Hoogte tegelvak chosen: the tiles fill that part of the price list, split evenly over the rows; fit() shrinks overflowing tiles. */
.featured-fill { flex: 0 0 var(--farea); grid-template-rows: repeat(var(--frows), minmax(0, 1fr)); }
.featured-fill .pcard { min-height: 0; overflow: hidden; }
/* Alleen tegels: the tile grid fills the screen, split evenly over the rows; fit() shrinks overflowing tiles. */
.featured-only { flex: 1; grid-template-rows: repeat(var(--frows), minmax(0, 1fr)); margin-bottom: 0; min-height: 0; }
.featured-only .pcard { min-height: 0; overflow: hidden; }

/* Kolommen lijst chosen by the club (without it the automatic rules above apply). Too much content still overflows
   sideways and fit() shrinks it. */
.prices-cols { column-width: auto; column-count: var(--pcols); column-fill: balance; }

/* ---- Mededeling ---- */
.announcement { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; }
.announcement.has-image { text-align: left; }
.announcement .text { flex: 1; min-width: 0; max-width: 34em; margin: 0 auto; }
.announcement.has-image .text { margin: 0; padding-right: 1.31em; }
.announcement .akind {
  display: inline-block; margin: 0 0 .85em; padding: .25em 1.4em; border-radius: 1.3em;
  font-size: .69em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--chip-bg); color: var(--chip-fg);
}
.theme-minimal .announcement .akind { background: none; color: var(--accent); box-shadow: inset 0 0 0 .09em var(--accent); }
.announcement h2 { font-size: 2.77em; line-height: 1.03; letter-spacing: -.02em; margin-bottom: .33em; }
.announcement p { font-size: 1.15em; line-height: 1.42; margin: 0; white-space: pre-line; color: var(--ink-muted); }
.announcement img, .announcement canvas { flex: none; max-width: 45%; max-height: 100%; object-fit: contain; margin-left: 1.31em; border-radius: .62em; }

/* ---- Afbeelding / poster ---- */
.type-afbeelding .fit { top: 2vmin; right: 2vmin; bottom: 2vmin; left: 2vmin; }
.poster { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---- Sponsor. Volledig scherm (or an older sponsor with an image) is full-bleed and has no top bar: the photo
   is the slide and the caption bar names the sponsor. Logo is a centred card with the logo above the text; an
   older sponsor without an image is the same card without a logo. ---- */
.sponsor-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.sponsor-cap {
  position: absolute; left: 4.2vmin; bottom: 4.2vmin; max-width: 88vw; padding: 1.8vmin 2.4vmin; border-radius: 1.4vmin;
  background: var(--caption-bg); color: var(--caption-fg);
}
.cap-row { display: flex; align-items: center; }
.cap-label { flex: none; font-size: 2vmin; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.cap-div { flex: none; width: .2vmin; height: 3.2vmin; background: currentColor; opacity: .25; margin: 0 2vmin; }
.cap-name { font-size: 3.2vmin; font-weight: 700; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cap-sub { font-size: 2.2vmin; opacity: .8; margin-top: .8vmin; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sponsor { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.sponsor .label { font-size: .77em; opacity: .7; margin: 0 0 .8em; text-transform: uppercase; letter-spacing: .1em; }
.sponsor h2 { font-size: 2.08em; font-weight: 700; letter-spacing: -.02em; }
.sponsor .msg { font-size: 1.15em; line-height: 1.42; margin: .8em 0 0; white-space: pre-line; color: var(--ink-muted); }
/* Logo mode: a fixed box the logo fits inside whole — square, very wide and tall logos all stay
   uncropped and never push the text out; transparency shows the theme background. */
.sponsor-logo { flex: none; width: 62%; height: 44%; object-fit: contain; margin: 0 0 1.4em; }
.sponsor .site { font-size: .85em; letter-spacing: .02em; color: var(--accent); margin: .6em 0 0; }

/* ---- QR-code: the real generated code on a white card, as big as the content area allows
   (≈75 cm² on a 1080p 43" TV), text beside it. Width and max-* instead of min(): older TV browsers lack it. ---- */
.qr { height: 100%; display: flex; align-items: center; }
.qr-code {
  flex: none; box-sizing: border-box; width: 45vw; height: 45vw; max-width: 70vh; max-height: 70vh;
  margin-right: 2.3em; padding: .85em; background: #fff; border-radius: .62em; box-shadow: var(--shadow);
}
.qr-code svg { display: block; width: 100%; height: 100%; }
.qr-text { flex: 1; min-width: 0; }
.qr h2 { font-size: 2.46em; line-height: 1.04; letter-spacing: -.02em; margin-bottom: .34em; }
.qr .cta { font-size: 1.15em; line-height: 1.4; margin: 0 0 .6em; white-space: pre-line; color: var(--ink-muted); }
.qr .site { font-size: .85em; letter-spacing: .02em; color: var(--accent); margin: 0; overflow-wrap: anywhere; }

/* ---- Activiteit: date panel left, title and text right ---- */
.activiteit { height: 100%; display: flex; align-items: center; }
.when-panel {
  flex: none; width: 13em; box-sizing: border-box; padding: 1.15em; margin-right: 1.54em; text-align: left;
  background: var(--panel); border: .096em solid var(--panel-border); border-radius: .62em; box-shadow: var(--shadow);
}
.theme-minimal .when-panel { background: none; border: 0; border-left: .19em solid var(--accent); border-radius: 0; }
.when-day { display: block; font-size: 1em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.when-date { display: block; font-size: 3.4em; font-weight: 700; line-height: .94; margin-top: .08em; }
.when-time { display: block; font-size: 1.31em; font-weight: 600; margin-top: .35em; }
.act-text { flex: 1; min-width: 0; }
.activiteit h2 { font-size: 2.46em; line-height: 1.04; letter-spacing: -.02em; }
.activiteit .desc { font-size: 1.08em; line-height: 1.45; margin: .85em 0 0; white-space: pre-line; color: var(--ink-muted); }
.activiteit .where { font-size: .92em; margin: 1em 0 0; color: var(--ink-muted); }

/* ---- Klok / datum, and the fallback screen when nothing is active (no top bar: the logo is the centrepiece) ---- */
.klok { text-align: center; }
.clock-time { font-size: 4.6em; font-weight: 700; line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clock-date { font-size: 1.62em; margin-top: .3em; color: var(--ink-muted); }
.clock-rule { width: 14vmin; height: .3vmin; background: var(--accent); margin: 3.4vmin auto 0; }
.type-klok .klok { height: 100%; display: flex; flex-direction: column; justify-content: center; }
.type-klok .clock-time { font-size: 8.46em; }
.type-klok .clock-date { margin-top: .57em; }
.type-fallback .bar { display: none; }
.fallback { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fallback-logo { max-width: 60vw; max-height: 35vh; object-fit: contain; margin-bottom: 5vh; }
.fallback-name { font-size: 2.08em; font-weight: 700; letter-spacing: -.02em; margin-bottom: .6em; }

/* Idle cards (a club screen with nothing to show yet) */
.idle { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.idle h2 { font-size: 2.08em; font-weight: 700; letter-spacing: -.02em; margin-bottom: .4em; }
.idle p { font-size: 1.15em; margin: 0; color: var(--ink-muted); }

/* ---- Themes: class on #app (so #app.theme-x, to beat the #app defaults) ---- */
/* Sport: the club colour as the page, with the pitch-line motif and translucent panels */
#app.theme-sport {
  --page: var(--primary); --ink: #fff; --ink-muted: rgba(255, 255, 255, .78);
  --panel: rgba(255, 255, 255, .08); --panel-border: rgba(255, 255, 255, .22);
  --bar-bg: rgba(0, 0, 0, .22); --bar-fg: #fff;
  --cat-ink: var(--accent-on-primary); --cat-rule: rgba(255, 255, 255, .3);
  --price-ink: #fff; --accent: var(--accent-on-primary); --shadow: none;
  --caption-bg: rgba(15, 14, 13, .82); --caption-fg: #fff;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 .2vmin, transparent .2vmin 9vmin);
}
.theme-sport .cat h2 { text-transform: uppercase; }

/* Donker */
#app.theme-dark {
  --page: #0f0e0d; --ink: #f7f6f3; --ink-muted: #a8a49c;
  --panel: #191816; --panel-border: #2e2c28;
  --bar-bg: #191816; --bar-fg: #f7f6f3;
  --cat-ink: var(--accent-dark); --cat-rule: #2e2c28;
  --price-ink: #fff; --accent: var(--accent-dark); --shadow: none;
  --caption-bg: rgba(15, 14, 13, .82); --caption-fg: #fff;
}

/* Minimaal: no panels, a transparent bar, the club colour only as a detail */
#app.theme-minimal {
  --page: #fbfbf9; --ink: #15150f; --ink-muted: #6b675f;
  --panel: transparent; --panel-border: transparent; --panel-pad: 0;
  --bar-bg: transparent; --bar-fg: #15150f;
  --cat-ink: #15150f; --cat-rule: rgba(21, 21, 15, .16);
  --price-ink: #15150f; --accent: var(--accent-primary); --shadow: none;
  --logo-base: 6vmin;
  --caption-bg: rgba(255, 255, 255, .94); --caption-fg: #17171a;
}
.theme-minimal .bar { border-bottom: .25vmin solid var(--cat-rule); }
.theme-minimal .cat { box-shadow: none; }

/* ---- Background image (club or screen), after the themes so it replaces Sport's motif. Fills without
   distortion; the overlay keeps text readable: darker behind light text, lighter behind dark text. ---- */
#app.has-bg {
  background-image: linear-gradient(var(--ov-a, transparent), var(--ov-b, transparent)), var(--bg-img);
  background-size: cover; background-position: center;
}
/* An animated background (player.js): a layer behind all content that plays once, with the same overlay on top.
   isolation keeps the negative z-index inside #app, above its own background. */
#app.paired { isolation: isolate; }
.bg-live { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
.bg-live img, .bg-live canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.bg-live::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(var(--ov-a, transparent), var(--ov-b, transparent));
}
#app.overlay-light { --ov-a: rgba(15, 14, 13, .45); --ov-b: rgba(15, 14, 13, .6); }
#app.overlay-medium { --ov-a: rgba(15, 14, 13, .6); --ov-b: rgba(15, 14, 13, .75); }
#app.overlay-strong { --ov-a: rgba(15, 14, 13, .74); --ov-b: rgba(15, 14, 13, .88); }
#app.overlay-lighten.overlay-light { --ov-a: rgba(255, 255, 255, .6); --ov-b: rgba(255, 255, 255, .7); }
#app.overlay-lighten.overlay-medium { --ov-a: rgba(255, 255, 255, .75); --ov-b: rgba(255, 255, 255, .85); }
#app.overlay-lighten.overlay-strong { --ov-a: rgba(255, 255, 255, .84); --ov-b: rgba(255, 255, 255, .92); }