/* Shared sizes keep all song content inside the TV's safe display area. */
:root {
  /* One design pixel at 1920x1080, scaled to fit the viewport on any TV. */
  --overlay-unit:min(.052083333vw,.092592593vh);
  --overlay-font-family:Inter,"Segoe UI",Arial,sans-serif;
  --overlay-reading-font-family:Arial,sans-serif;
}
.content-overlay {
  position:absolute;left:5vw;bottom:7vh;z-index:2;
  width:max-content;max-width:90vw;max-height:70vh;
  display:flex;align-items:center;gap:calc(18 * var(--overlay-unit));overflow:hidden;
  padding:calc(10 * var(--overlay-unit)) calc(14 * var(--overlay-unit));border:1px solid #ffffff40;border-radius:calc(12 * var(--overlay-unit));
  isolation:isolate;color:#fff;pointer-events:none;
  font-family:var(--overlay-font-family);font-size:clamp(calc(14 * var(--overlay-unit)),1.05vw,calc(21 * var(--overlay-unit)));line-height:1.3;
  opacity:0;transition:opacity var(--overlay-fade-in,1200ms) ease;
}
.content-overlay::before {content:"";position:absolute;inset:0;z-index:-1;background-color:var(--overlay-background,#000);opacity:var(--overlay-background-opacity,.6);border-radius:inherit;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.content-overlay:not(.content-overlay--fullscreen) {background:rgba(0,0,0,.55)!important;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);will-change:opacity}
.content-overlay:not(.content-overlay--fullscreen)::before {background:transparent;opacity:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.content-overlay--fullscreen::before {opacity:1;-webkit-backdrop-filter:none;backdrop-filter:none}
.content-overlay--small {max-width:33.333333vw}
.content-overlay--medium {width:55vw;max-height:22vh;padding:calc(16 * var(--overlay-unit)) calc(20 * var(--overlay-unit))}
.content-overlay--large {width:90vw;height:25vh;padding:calc(18 * var(--overlay-unit)) calc(24 * var(--overlay-unit));font-size:clamp(calc(16 * var(--overlay-unit)),1.4vw,calc(28 * var(--overlay-unit)))}
.content-overlay.is-visible {opacity:1}
.content-overlay.is-fading {opacity:0;transition-duration:.4s}
.content-overlay img {display:block;max-width:45%;max-height:18vh;object-fit:contain;flex-shrink:1}
.content-overlay-copy {flex:1;min-width:0;max-height:100%;overflow:hidden;overflow-wrap:anywhere}
.content-overlay h2 {font-size:1.15em;margin:0 0 .4em}
.content-overlay h2:last-child {margin-bottom:0}
.content-overlay p {margin:0;white-space:pre-line;color:inherit}
.content-overlay .content-overlay-caption {font-size:.8em;margin-top:.5em}
.content-overlay img[hidden] {display:none}
.content-overlay .ambient-legend {position:static;max-width:100%;padding:0;border:0;background:none}
.content-overlay .ambient-legend-key {width:clamp(calc(30 * var(--overlay-unit)),2vw,calc(40 * var(--overlay-unit)));height:clamp(calc(30 * var(--overlay-unit)),2vw,calc(40 * var(--overlay-unit)));font-size:clamp(calc(25 * var(--overlay-unit)),1.7vw,calc(32 * var(--overlay-unit)))}
.content-overlay .ambient-legend-key.is-ok {font-size:clamp(calc(14 * var(--overlay-unit)),1vw,calc(18 * var(--overlay-unit)))}
.ambient-cover.menu-open .content-overlay {visibility:hidden}
@media(max-width:650px) {
  :root {--overlay-unit:1px}
  .content-overlay--medium {width:80vw}
  .content-overlay--large {padding:calc(12 * var(--overlay-unit))}
  .content-overlay img {max-width:40%}
}
@media(prefers-reduced-motion:reduce) {.content-overlay {transition:none}}


/* Image segments fill their frame; text segments can still place a photo beside copy. */
.content-overlay--shaped {
  width:auto;height:16vh;max-width:90vw;max-height:25vh;
  aspect-ratio:var(--overlay-aspect-ratio,16 / 9);
}
.content-overlay--shaped.content-overlay--medium {width:auto;height:20vh}
.content-overlay--shaped.content-overlay--large {width:auto;height:25vh}
.content-overlay.content-overlay--image {padding:0;border:0}
.content-overlay--image img {
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;transform:scale(1.03);
}
.content-overlay--image .content-overlay-copy {position:relative;align-self:flex-end;flex:none;width:100%;padding:calc(12 * var(--overlay-unit)) calc(16 * var(--overlay-unit));background:linear-gradient(transparent,rgba(0,0,0,.8))}
.content-overlay--image .content-overlay-copy:empty {display:none}

/* Direct media slots show the whole asset; FULL fills the ambient TV viewport. */
.content-overlay.content-overlay--media {
  --overlay-background:#000;--overlay-background-opacity:1;
  left:auto;right:5vw;top:auto;bottom:7vh;
  box-sizing:border-box;width:min(29.166667vw,51.851852vh);height:auto;
  max-width:90vw;max-height:70vh;aspect-ratio:var(--overlay-aspect-ratio,16 / 9);
  padding:0;border:0;background:#000;overflow:hidden;
}
.content-overlay.content-overlay--media.is-fading {
  z-index:2;transition-duration:1.2s;
}
.content-overlay--media .content-overlay-media-asset {
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:cover;object-position:center;transform:scale(1.03);background:#000;
}
.content-overlay--visual-sequence .content-overlay-media-asset {
  object-fit:contain;transform:none;
}
.content-overlay.content-overlay--media-square {width:min(22.916667vw,40.740741vh)}
.content-overlay.content-overlay--media-tall {width:auto;height:min(57.407407vh,90vw)}
.content-overlay.content-overlay--media-full {
  inset:0;width:100%;height:100%;max-width:none;max-height:none;
  aspect-ratio:auto;border-radius:0;
}

/* Narrow handheld screens retain readable controls and larger image proportions. */
@media(max-width:650px) {
  .content-overlay--small {max-width:90vw}
  .content-overlay.content-overlay--media {width:70vw}
  .content-overlay.content-overlay--media-square {width:min(55vw,70vh)}
  .content-overlay.content-overlay--media-tall {width:auto;height:min(70vh,90vw)}
  .content-overlay.content-overlay--media-full {width:100%;height:100%}
}

/* Headers remain solid while the content panel retains its configured opacity. */
.content-overlay.content-overlay--content {display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0}
.content-overlay h2.content-overlay-header {
  display:flex;align-items:center;justify-content:flex-start;gap:calc(8 * var(--overlay-unit));flex:none;
  width:100%;margin:0;padding:calc(6 * var(--overlay-unit)) calc(10 * var(--overlay-unit));background:#000;color:#fff;
  text-align:left;font-size:1em;line-height:1.2;font-style:normal;
  overflow-wrap:anywhere;
}
/* The header sits over the 55% body tint; 33.3% more black yields 70% total. */
.content-overlay:not(.content-overlay--fullscreen) h2.content-overlay-header {background:rgba(0,0,0,.333)}
.content-overlay-type-icon {display:inline-flex;flex:none;color:#83a9c4;width:1em;height:1em}
.content-overlay-type-icon svg {display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.content-overlay-type-icon .question-dot {fill:currentColor;stroke:none}
.content-overlay-body {position:relative;display:flex;align-items:flex-start;gap:calc(14 * var(--overlay-unit));flex:1;min-height:0;min-width:0;padding:calc(10 * var(--overlay-unit)) calc(14 * var(--overlay-unit));overflow:hidden}
.content-overlay--medium .content-overlay-body {padding:calc(12 * var(--overlay-unit)) calc(16 * var(--overlay-unit))}
.content-overlay--large .content-overlay-body {padding:calc(14 * var(--overlay-unit)) calc(20 * var(--overlay-unit))}
.content-overlay--image .content-overlay-body {padding:0}
.content-overlay--image .content-overlay-copy {z-index:1}
.content-overlay-choices {list-style:none;margin:calc(6 * var(--overlay-unit)) 0 0;padding:0;color:#fff}
.content-overlay-choices li {padding:3px calc(6 * var(--overlay-unit));border:1px solid transparent;border-radius:4px}
.content-overlay .content-overlay-answer {color:#fff;font-weight:700;background:rgba(255,255,255,.18);border:1px solid #fff;border-radius:4px;padding:4px calc(6 * var(--overlay-unit))}
.content-overlay.content-overlay--trivia {
  color:#fff!important;
  --overlay-reading-font-size:clamp(calc(14.5 * var(--overlay-unit)),.95vw,calc(19.5 * var(--overlay-unit)));
  --overlay-panel-max-height:min(51.851852vh,42vw,76vh);
  left:auto;right:5vw;top:auto;bottom:7vh;
  width:37.5vw;height:auto;
  max-width:37.5vw;max-height:var(--overlay-panel-max-height);
  aspect-ratio:auto;font-family:var(--overlay-reading-font-family);font-size:var(--overlay-reading-font-size);line-height:1.5;
}
.content-overlay--trivia .content-overlay-body {padding:calc(20 * var(--overlay-unit)) calc(26 * var(--overlay-unit));flex:0 1 auto}
.content-overlay--trivia .content-overlay-copy {display:flex;flex-direction:column;height:auto;max-height:calc(var(--overlay-panel-max-height) - calc(80 * var(--overlay-unit)));min-height:0;overflow-y:auto;pointer-events:auto;cursor:default}
.content-overlay.content-overlay--trivia.content-overlay--long-list {height:var(--overlay-panel-max-height)}
.content-overlay--trivia.content-overlay--long-list .content-overlay-body {flex:1}
.content-overlay--trivia.content-overlay--long-list .content-overlay-copy {height:100%;max-height:100%}
.content-overlay--trivia .content-overlay-copy > p {flex:none}
.content-overlay--trivia .content-overlay-choices {min-height:0;overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;cursor:default;padding:2px 4px 2px 2px}
.content-overlay--trivia h2.content-overlay-header {padding:calc(10 * var(--overlay-unit)) calc(22 * var(--overlay-unit));font-size:.92em;font-weight:600;line-height:1.3;gap:calc(8 * var(--overlay-unit))}
.content-overlay--trivia .content-overlay-choices {margin-top:calc(12 * var(--overlay-unit))}
.content-overlay--trivia .content-overlay-choices li {padding:calc(6 * var(--overlay-unit)) calc(10 * var(--overlay-unit));margin-bottom:4px}
/* Multiple-choice cards retain their layout while sharing the reading font. */
.content-overlay--quiz .content-overlay-body {padding:calc(18 * var(--overlay-unit)) calc(24 * var(--overlay-unit))}
.content-overlay--quiz .content-overlay-choices {margin-top:calc(8 * var(--overlay-unit))}
.content-overlay--quiz .content-overlay-choices li {margin:0 0 4px;padding:5px calc(10 * var(--overlay-unit))}
.content-overlay--song-meaning .content-overlay-body,
.content-overlay--song-composition .content-overlay-body {
  padding:calc(10 * var(--overlay-unit)) calc(26 * var(--overlay-unit)) calc(20 * var(--overlay-unit));
}
.content-overlay-footer {flex:none;width:100%;padding:calc(9 * var(--overlay-unit)) calc(12 * var(--overlay-unit));background:#000;color:#fff;text-align:center;font-size:.72em;line-height:1.3}
.content-overlay:not(.content-overlay--fullscreen) .content-overlay-footer {background:rgba(0,0,0,.8)}
.content-overlay-privacy {margin-top:calc(7 * var(--overlay-unit));padding-top:calc(7 * var(--overlay-unit));border-top:1px solid #ffffff40;font-size:.95em;line-height:1.35;color:#fff}
.content-overlay-choices li.is-selected {border-color:#fff;outline:1px solid #fff;background:rgba(255,255,255,.12);font-weight:700}
.content-overlay .content-overlay-feedback {font-weight:700;margin-bottom:calc(8 * var(--overlay-unit))}
.content-overlay-choices li.content-overlay-answer {background:rgba(255,255,255,.3)}
@media(max-width:650px) {
  .content-overlay.content-overlay--trivia,
  .content-overlay.content-overlay--trivia.content-overlay--roomy {
    --overlay-panel-max-height:78vh;
    width:94vw;max-width:94vw;right:3vw;top:auto;bottom:4vh;
  }
}

/* Community cards keep content-driven height within shape-specific limits. */
.content-overlay.content-overlay--trivia.content-overlay--community {
  --overlay-panel-max-height:59.814815vh;
  box-sizing:border-box;width:min(24.791667vw,51vh);height:auto;
  max-width:79.9vw;max-height:var(--overlay-panel-max-height);
  aspect-ratio:auto;font-size:var(--overlay-reading-font-size);
}
.content-overlay.content-overlay--trivia.content-overlay--community-wide {
  --overlay-panel-max-height:min(31.875vh,43.03125vw);
  width:min(31.875vw,56.666667vh);max-width:76.5vw;
}
.content-overlay.content-overlay--trivia.content-overlay--community-square {
  --overlay-panel-max-height:min(44.074074vh,76.5vw);
  width:min(24.791667vw,44.074074vh);max-width:76.5vw;
}
.content-overlay--community h2.content-overlay-header {padding:calc(12 * var(--overlay-unit)) calc(20 * var(--overlay-unit))}
.content-overlay--community .content-overlay-body {padding:calc(14 * var(--overlay-unit)) calc(17 * var(--overlay-unit))}
.content-overlay--community .content-overlay-copy {overflow-x:auto}
.content-overlay--community .content-overlay-table {
  width:100%;border-collapse:collapse;table-layout:auto;text-align:left;
  font-size:.8em;line-height:1.4;
}
.content-overlay--community .content-overlay-table--sized {table-layout:fixed}
.content-overlay--community .content-overlay-table th,
.content-overlay--community .content-overlay-table td {
  padding:calc(7 * var(--overlay-unit)) 4px;vertical-align:top;overflow-wrap:anywhere;
  border-bottom:1px solid rgba(255,255,255,.3);
}
.content-overlay--community .content-overlay-table:not(.content-overlay-table--sized) th:first-child,
.content-overlay--community .content-overlay-table:not(.content-overlay-table--sized) td:first-child {
  width:1%;white-space:nowrap;
}
.content-overlay--community .content-overlay-table th {font-weight:700;color:#fff}
.content-overlay--community .content-overlay-table tbody tr:last-child td {border-bottom:0}
/* TALL event/table cards need more room for reading from across the room. */
@media(min-width:651px) {
  .content-overlay.content-overlay--trivia.content-overlay--community-tall:not(.content-overlay--community-image) {
    width:30vw;max-width:30vw;
  }
  .content-overlay--community-tall:not(.content-overlay--community-image) .content-overlay-table {
    font-size:1em;
  }
}
.content-overlay.content-overlay--community-image {background:transparent}
.content-overlay.content-overlay--community-image.content-overlay--fullscreen {background:#000}
.content-overlay--community-image .content-overlay-body {
  display:block;flex:0 1 auto;align-self:stretch;padding:0;overflow:hidden;
}
.content-overlay--community-image .content-overlay-copy {
  display:block;width:100%;height:auto;max-height:calc(var(--overlay-panel-max-height) - calc(64 * var(--overlay-unit)));
  overflow:hidden;
}
.content-overlay--community-image .content-overlay-community-image {
  display:block;width:100%;height:auto;max-width:none;
  max-height:calc(var(--overlay-panel-max-height) - calc(64 * var(--overlay-unit)));
  aspect-ratio:var(--overlay-aspect-ratio);object-fit:cover;object-position:center;
  transform:scale(1.03);
}
.content-overlay--community-image-only .content-overlay-copy,
.content-overlay--community-image-only .content-overlay-community-image {
  max-height:var(--overlay-panel-max-height);
}
.content-overlay.content-overlay--trivia.content-overlay--community-wide.content-overlay--community-image {
  --overlay-panel-max-height:min(26.25vh,35.4375vw);
  width:min(26.25vw,46.666667vh);max-width:63vw;
}
.content-overlay--community-image .content-overlay-copy > p,
.content-overlay--community-image .content-overlay-copy > table {
  box-sizing:border-box;margin:0;padding:calc(14 * var(--overlay-unit)) calc(20 * var(--overlay-unit));
}
.content-overlay--community .content-overlay-community-image[hidden] {display:none}
.content-overlay .content-overlay-image-details {
  box-sizing:border-box;flex:none;margin:0;
  padding:calc(8 * var(--overlay-unit)) calc(17 * var(--overlay-unit));
  background:#000;color:#fff;max-height:20vh;overflow-y:auto;pointer-events:auto;
  white-space:pre-line;overflow-wrap:anywhere;line-height:1.4;
}
@media(max-width:650px) {
  .content-overlay.content-overlay--trivia.content-overlay--community {
    width:min(79.9vw,51vh);right:3vw;bottom:4vh;
  }
  .content-overlay.content-overlay--trivia.content-overlay--community-wide {
    --overlay-panel-max-height:min(64.6vh,44.94375vw);
    width:79.9vw;max-width:79.9vw;
  }
  .content-overlay.content-overlay--trivia.content-overlay--community-square {
    --overlay-panel-max-height:min(61.2vh,79.9vw);
    width:min(79.9vw,61.2vh);max-width:79.9vw;
  }
  .content-overlay.content-overlay--trivia.content-overlay--community-wide.content-overlay--community-image {
    --overlay-panel-max-height:min(53.2vh,37.0125vw);
    width:65.8vw;max-width:65.8vw;
  }
}
/* Clickable image previews use 20% of the screen width. Their shape determines
   height; FULL slots retain their explicitly requested full-screen layout. */
.content-overlay.content-overlay--image:not(.content-overlay--fullscreen),
.content-overlay.content-overlay--media:not(.content-overlay--fullscreen),
.content-overlay.content-overlay--trivia.content-overlay--community-image:not(.content-overlay--fullscreen) {
  width:20vw;height:auto;max-width:20vw;
}
.content-overlay.content-overlay--trivia.content-overlay--community-image:not(.content-overlay--fullscreen) {
  --overlay-panel-max-height:70vh;
}
.content-overlay.content-overlay--trivia.content-overlay--community-wide.content-overlay--community-image:not(.content-overlay--fullscreen) {
  width:25vw;max-width:25vw;
}
.content-overlay.content-overlay--media-profile:not(.content-overlay--fullscreen),
.content-overlay.content-overlay--trivia.content-overlay--community-profile.content-overlay--community-image:not(.content-overlay--fullscreen) {
  width:17vw;max-width:17vw;
}

/* FULL uses the whole ambient-cover viewport. Untitled images fill every edge. */
.content-overlay.content-overlay--trivia.content-overlay--community-full {
  --overlay-panel-max-height:100%;
  inset:0;width:100%;height:100%;max-width:none;max-height:none;
  border:0;border-radius:0;
}
.content-overlay--community-full .content-overlay-body {flex:1;min-height:0}
.content-overlay--community-full .content-overlay-copy {height:100%;max-height:none;overflow-y:auto}
.content-overlay--community-full.content-overlay--community-image .content-overlay-body {flex:1}
.content-overlay--community-full.content-overlay--community-image .content-overlay-copy {height:100%;max-height:none;overflow:hidden}
.content-overlay--community-full .content-overlay-community-image {
  width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:cover;
}

/* Titled images reserve a separate header row. Keep the top of the image
   visible; any height limit clips the bottom instead of cropping the top. */
.content-overlay--image-with-header:not(.content-overlay--fullscreen) > .content-overlay-header {
  box-sizing:border-box;flex:0 0 auto;
}
.content-overlay.content-overlay--community-image.content-overlay--image-with-header:not(.content-overlay--fullscreen) {
  height:auto;max-height:76vh;
}
.content-overlay--community-image.content-overlay--image-with-header:not(.content-overlay--fullscreen) .content-overlay-body {
  flex:0 1 auto;min-height:0;overflow:hidden;
}
.content-overlay--community-image.content-overlay--image-with-header:not(.content-overlay--fullscreen) .content-overlay-copy {
  max-height:none;overflow:hidden;
}
.content-overlay--community-image.content-overlay--image-with-header:not(.content-overlay--fullscreen) .content-overlay-community-image {
  max-height:var(--overlay-panel-max-height);object-position:top center;transform:none;
}
.content-overlay--image.content-overlay--image-with-header:not(.content-overlay--fullscreen) .content-overlay-body > img {
  object-position:top center;transform:none;
}

/* Tall images use 40% of screen height, with proportional 9:16 width. */
.content-overlay.content-overlay--media-tall:not(.content-overlay--fullscreen),
.content-overlay.content-overlay--trivia.content-overlay--community-tall.content-overlay--community-image:not(.content-overlay--fullscreen) {
  width:min(20vw,22.5vh);height:auto;max-height:40vh;
  --overlay-panel-max-height:40vh;
}

/* Add the header and details to the image height instead of shrinking the
   image to squeeze text into its frame. Keep the whole card in the safe area. */
.content-overlay.content-overlay--trivia.content-overlay--community-image:not(.content-overlay--fullscreen),
.content-overlay.content-overlay--trivia.content-overlay--community-tall.content-overlay--community-image:not(.content-overlay--fullscreen) {
  max-height:76vh;
}
.content-overlay.content-overlay--community-image:not(.content-overlay--fullscreen) .content-overlay-body {
  flex:0 0 auto;
}

/* Every overlay image can expand without changing the music timeline. */
/* Larger image labels remain readable on TVs without enlarging text cards. */
.content-overlay--community-image h2.content-overlay-header {
  font-size:clamp(calc(20 * var(--overlay-unit)),1.25vw,calc(28 * var(--overlay-unit)));
}
.content-overlay--community-image .content-overlay-header > span {white-space:pre-line}
.content-overlay--community-image .content-overlay-image-details {
  font-size:clamp(calc(18 * var(--overlay-unit)),1.15vw,calc(26 * var(--overlay-unit)));
}
/* Query the card's width, rather than the TV viewport, for its text. Explicit
   trivia widths prevent inline containment from collapsing short cards. The
   existing viewport font rules remain the fallback on older TV browsers. */
@supports (container-type:inline-size) and (font-size:1cqw) {
  .content-overlay--shaped {container-type:inline-size}
  .content-overlay--shaped .content-overlay-body,
  .content-overlay--shaped .content-overlay-image-details,
  .content-overlay--image > .content-overlay-copy {
    font-size:clamp(calc(12 * var(--overlay-unit)),2.8cqw,calc(20 * var(--overlay-unit)));
  }
  .content-overlay--shaped h2.content-overlay-header {
    font-size:clamp(calc(12 * var(--overlay-unit)),2.6cqw,calc(18 * var(--overlay-unit)));
  }
  .content-overlay--shaped .content-overlay-footer {
    font-size:clamp(calc(10 * var(--overlay-unit)),1.9cqw,calc(14 * var(--overlay-unit)));
  }
  .content-overlay--shaped.content-overlay--community-image h2.content-overlay-header {
    font-size:clamp(calc(20 * var(--overlay-unit)),4.5cqw,calc(28 * var(--overlay-unit)));
  }
  .content-overlay--shaped.content-overlay--community-image .content-overlay-image-details {
    font-size:clamp(calc(18 * var(--overlay-unit)),4.2cqw,calc(26 * var(--overlay-unit)));
  }
}

/* Shorter family card: full-bleed portrait left, cropped from the bottom. */
.content-overlay.content-overlay--trivia.content-overlay--community-message.content-overlay--community-image {
  width:min(26vw,104.575163vh);max-width:26vw;height:min(12.43125vw,50vh);max-height:50vh;
  --overlay-panel-max-height:50vh;aspect-ratio:320 / 153;
  background:rgba(0,0,0,.7)!important;
}
/* One shared background tint keeps header and greeting equally translucent
   while preserving full opacity for the portrait and text. */
.content-overlay.content-overlay--community-message.content-overlay--community-image .content-overlay-body {
  display:flex;flex:1;min-height:0;
}
.content-overlay--community-message.content-overlay--community-image .content-overlay-copy {
  display:grid;grid-template-columns:33% minmax(0,1fr);align-items:stretch;
  gap:0;box-sizing:border-box;
  padding:0;height:100%;max-height:none;background:transparent;
}
.content-overlay--community-message.content-overlay--community-image .content-overlay-community-image {
  width:100%;height:100%;min-height:0;max-height:100%;aspect-ratio:auto;transform:none;align-self:stretch;
  object-fit:cover;object-position:top center;border-radius:0;
}
.content-overlay-message-copy {display:flex;flex-direction:column;justify-content:center;gap:calc(12 * var(--overlay-unit));padding:calc(16 * var(--overlay-unit));box-sizing:border-box;min-width:0;min-height:0;overflow-y:auto}
.content-overlay .content-overlay-message-signature {
  padding:0;margin:0;font-size:clamp(calc(18 * var(--overlay-unit)),1.1vw,calc(24 * var(--overlay-unit)));line-height:1.4;white-space:pre-line;color:#b9ddff;
}
.content-overlay .content-overlay-message-signature--family {color:#ffe0a3}
.content-overlay .content-overlay-message-signature--staff {color:#b9ddff}
.content-overlay .content-overlay-message-signature--resident {color:#b8efcc}
.content-overlay--community-message .content-overlay-message-copy > .content-overlay-message-text {
  padding:0;margin:0;min-width:0;white-space:pre-line;line-height:1.4;
  font-size:clamp(calc(18 * var(--overlay-unit)),1.1vw,calc(24 * var(--overlay-unit)));
}
@supports (font-size:1cqw) {
  .content-overlay--community-message .content-overlay-message-copy > .content-overlay-message-text {
    font-size:clamp(calc(18 * var(--overlay-unit)),4cqw,calc(24 * var(--overlay-unit)));
  }
  .content-overlay .content-overlay-message-signature {font-size:clamp(calc(18 * var(--overlay-unit)),4cqw,calc(24 * var(--overlay-unit)))}
}
@media(max-width:650px) {
  .content-overlay.content-overlay--trivia.content-overlay--community-message.content-overlay--community-image {
    width:min(90vw,88.888889vh);max-width:90vw;height:min(50.625vw,50vh);max-height:50vh;--overlay-panel-max-height:50vh;
  }
}

/* SONG suggestions show the indexed thumbnail intact, with credit beneath. */
.content-overlay.content-overlay--trivia.content-overlay--song-suggestion.content-overlay--community-image {
  width:25vw;max-width:25vw;height:auto;max-height:60vh;aspect-ratio:auto;
  --overlay-panel-max-height:60vh;background:rgba(0,0,0,.7)!important;
}
.content-overlay--song-suggestion.content-overlay--community-image .content-overlay-copy,
.content-overlay--song-suggestion.content-overlay--community-image .content-overlay-community-image {
  max-height:none;
}
.content-overlay--song-suggestion.content-overlay--community-image .content-overlay-community-image {
  aspect-ratio:16 / 9;object-fit:contain;transform:none;
}
.content-overlay-song-credit {flex:none;padding:calc(10 * var(--overlay-unit)) calc(16 * var(--overlay-unit));text-align:left;background:#000}
@media(max-width:650px) {
  .content-overlay.content-overlay--trivia.content-overlay--song-suggestion.content-overlay--community-image {width:70vw;max-width:70vw}
}

/* Personal photo captions use the smaller standard overlay title range. */
.content-overlay.content-overlay--personal-photo h2.content-overlay-header {
  font-size:clamp(calc(14 * var(--overlay-unit)),.95vw,calc(18 * var(--overlay-unit)));
}
@supports (font-size:1cqw) {
  .content-overlay.content-overlay--personal-photo h2.content-overlay-header {
    font-size:clamp(calc(14 * var(--overlay-unit)),3.2cqw,calc(18 * var(--overlay-unit)));
  }
}

.content-overlay .content-overlay-expandable-image {pointer-events:auto;cursor:zoom-in}
.content-overlay-expandable-image:focus-visible {outline:3px solid #fff;outline-offset:-4px}
.content-image-preview {
  position:fixed;inset:0;box-sizing:border-box;width:100vw;height:100vh;height:100dvh;
  max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;
  background:#000;color:#fff;opacity:1;transition:opacity .5s ease;
}
.content-image-preview::backdrop {background:transparent}
.content-image-preview.is-fading {opacity:0}
.content-image-preview img {
  display:block;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;cursor:zoom-out;
}
.content-image-preview-hint {
  position:absolute;bottom:max(calc(12 * var(--overlay-unit)),env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);
  margin:0;padding:calc(8 * var(--overlay-unit)) calc(14 * var(--overlay-unit));border-radius:calc(20 * var(--overlay-unit));max-width:90%;text-align:center;
  background:#171717e6;color:#fff;font:calc(14 * var(--overlay-unit)) Arial,sans-serif;pointer-events:none;
  opacity:1;transition:opacity .7s ease;
}
.content-image-preview-hint.is-faded {opacity:0}
@media(prefers-reduced-motion:reduce) {.content-image-preview {transition:none}}

/* Keep supporting copy readable against artwork and the blurred dark panel. */
.content-overlay .content-overlay-caption,
.content-overlay .content-overlay-footer,
.content-overlay .content-overlay-privacy,
.content-overlay .content-overlay-image-details {color:#fff0d6}

/* Electron's 448x252 playback widget uses the entire wide viewport. */
:root[data-electron-widget] {
  --overlay-unit:.65px;
  overflow:hidden!important;
}
:root[data-electron-widget] body,
:root[data-electron-widget] body * {
  pointer-events:none!important;
  scrollbar-width:none!important;
  overscroll-behavior:none!important;
}
:root[data-electron-widget] *::-webkit-scrollbar {display:none!important}
:root[data-electron-widget] body {overflow:hidden!important}
:root[data-electron-widget] .content-overlay.content-overlay {
  background:rgba(0,0,0,.72)!important;
  --overlay-aspect-ratio:16 / 9!important;
  --overlay-panel-max-height:100vh!important;
  position:fixed;inset:0!important;
  width:100vw!important;height:100vh!important;
  min-width:0;min-height:0;max-width:none!important;max-height:none!important;
  box-sizing:border-box;aspect-ratio:16 / 9!important;
  border:0!important;border-radius:0!important;margin:0!important;
  font-size:12px!important;
}
:root[data-electron-widget] .content-overlay .content-overlay-body {
  flex:1;min-height:0;max-height:100%;font-size:12px;
}
:root[data-electron-widget] .content-overlay .content-overlay-copy,
:root[data-electron-widget] .content-overlay .content-overlay-choices,
:root[data-electron-widget] .content-overlay .content-overlay-image-details {
  max-height:100%;overflow:hidden!important;
}
:root[data-electron-widget] .content-overlay h2.content-overlay-header {font-size:13px}
:root[data-electron-widget] .content-overlay .content-overlay-footer {font-size:10px}
:root[data-electron-widget] .content-overlay .content-overlay-image-details {font-size:12px}
:root[data-electron-widget] .content-overlay--community-image .content-overlay-copy {height:100%}
:root[data-electron-widget] .content-overlay--community-image .content-overlay-community-image {
  height:100%;max-height:100%;aspect-ratio:auto;object-fit:contain;transform:none;
}
:root[data-electron-widget] .content-overlay .content-overlay-media-asset {
  object-fit:contain;transform:none;background:transparent;
}
:root[data-electron-widget] .content-overlay-copy:has(> .content-overlay-message-copy) {
  display:grid;grid-template-columns:33% minmax(0,1fr);
}