.live-art { margin: 1rem 0 .35rem; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid rgba(195, 167, 109, .22); border-radius: 9px; background: rgba(14, 29, 35, .64); }
.live-art-status { margin: .6rem .8rem; font-size: .79rem; line-height: 1.5; color: #b9c8c8; }
.live-art-status::before { content: ''; display: inline-block; width: .4rem; height: .4rem; margin-right: .55rem; border-radius: 50%; background: #bca474; }
.live-art[data-state="processing"] .live-art-status::before { animation: live-art-pulse 2.5s ease-in-out infinite; }
.live-art-frame { position: relative; overflow: hidden; isolation: isolate; background: #112128; aspect-ratio: 16 / 9; max-height: 330px; }
.live-art-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.live-art-footer { display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .5rem .75rem; }
.live-art-caption { color: #b5c1bd; font-size: .72rem; line-height: 1.4; }
.live-art-motion { flex: 0 0 auto; padding: .28rem .45rem; border: 1px solid rgba(195, 167, 109, .3); border-radius: 5px; background: rgba(44, 59, 62, .8); color: #ddc590; font-size: .72rem; cursor: pointer; }
.live-art-motion:focus-visible { outline: 2px solid #ddc590; outline-offset: 2px; }
/* The available story column, rather than the screen, decides whether two columns fit. */
#timeline-channel { container: round-timeline / inline-size; }
.round-story-card > .live-art:not([data-state="ready"]) .live-art-footer { display: none; }
@container round-timeline (min-width: 640px) {
  .round-story-card:has(> .live-art[data-state="ready"]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr);
    column-gap: 18px;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }
  .round-story-card:has(> .live-art[data-state="ready"]) > .round-story-heading {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .round-story-card:has(> .live-art[data-state="ready"]) > .round-story-locations {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .round-story-card:has(> .live-art[data-state="ready"]) > .round-story-narration {
    grid-column: 1;
    grid-row: 3;
    min-width: 0;
    max-width: none;
  }
  .round-story-card:has(> .live-art[data-state="ready"]) > .message-playback {
    grid-column: 1;
    grid-row: 4;
    min-width: 0;
  }
  .round-story-card > .live-art[data-state="ready"] {
    grid-column: 2;
    grid-row: 3 / span 2;
    align-self: start;
    margin: 0;
  }
  .round-story-card:has(> .live-art[data-state="ready"]) > .round-story-details {
    grid-column: 1 / -1;
    grid-row: 5;
    min-width: 0;
  }
}
.live-art-effect { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; }
.live-art[data-motion="on"] .live-art-effect { opacity: .18; }
.live-art[data-motion="on"] .live-art-rain { background-image: repeating-linear-gradient(105deg, transparent 0 23px, rgba(214, 232, 235, .34) 24px, transparent 25px 60px); background-size: 160px 140px; animation: live-art-rain 1.8s linear infinite; }
.live-art[data-motion="on"] .live-art-fog { inset: -12%; background: radial-gradient(ellipse at 25% 78%, rgba(194, 209, 210, .65), transparent 58%); animation: live-art-fog 18s ease-in-out infinite alternate; }
.live-art[data-motion="on"] .live-art-candle { background: radial-gradient(ellipse at 75% 60%, rgba(228, 177, 94, .65), transparent 65%); animation: live-art-candle 6s ease-in-out infinite alternate; }
@keyframes live-art-pulse { 50% { opacity: .4; } }
@keyframes live-art-rain { to { background-position: -20px 140px; } }
@keyframes live-art-fog { to { transform: translateX(8%); opacity: .1; } }
@keyframes live-art-candle { to { opacity: .08; } }
@media (max-width: 480px) { .live-art-frame { aspect-ratio: 1.35; max-height: 240px; } .live-art-footer { align-items: flex-start; } .live-art-caption { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .live-art-effect { display: none; } .live-art *, .live-art-status::before { animation: none !important; } }
.live-art [hidden] { display: none !important; }
.live-art-thumbs { display:flex; gap: .4rem; padding: .5rem .7rem 0; }
.live-art-thumb { width: 54px; height: 38px; padding: 2px; border: 1px solid rgba(195,167,109,.25); border-radius: 5px; background: #162b32; cursor: pointer; }
.live-art-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 3px; }
.live-art-thumb[aria-pressed="true"] { border-color: #ddc590; box-shadow: 0 0 0 1px #ddc590; }
.live-art-controls { display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem .75rem 0; }
.live-art-enlarge,.live-art-slide { border:0; background: transparent; color:#ddc590; padding:.2rem 0; font-size:.72rem; cursor:pointer; }
.live-art button:focus-visible { outline:2px solid #ddc590; outline-offset:3px; }
.live-art-enter { animation: live-art-enter .6s ease-out; }
@keyframes live-art-enter { from { opacity:.25; } to { opacity:1; } }
.live-art-dialog { width:min(90vw,1100px); max-height:90dvh; padding:.75rem; border:1px solid rgba(195,167,109,.5); border-radius:10px; background:#162b32; color:#ddc590; }
.live-art-dialog::backdrop { background:rgba(3,12,16,.85); }
.live-art-dialog img { display:block; max-width:100%; max-height:78dvh; object-fit:contain; margin:auto; }
.live-art-dialog-close { display:block; margin:0 0 .5rem auto; color:inherit; background:#243d45; border:1px solid #a9956b; border-radius:5px; padding:.35rem .7rem; cursor:pointer; }
.campaign-cover { width:90px; height:62px; border-radius:6px; flex:0 0 auto; background:linear-gradient(125deg,#213941,#34494a); display:grid; place-items:center; overflow:hidden; color:#bba577; }
.campaign-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.campaign-cover-placeholder { font-size:1.2rem; opacity:.65; }
.room-row.campaign-with-cover { display:grid; grid-template-columns:90px minmax(0,1fr) auto; gap:.75rem; align-items:center; }
@media (max-width:480px) { .room-row.campaign-with-cover { grid-template-columns:64px minmax(0,1fr); gap:.5rem; } .campaign-cover { width:64px; height:48px; } .campaign-with-cover > button { grid-column:2; justify-self:start; } }

.live-art:not([data-state="ready"]) .live-art-controls { display:none; }
.campaign-cover [hidden] { display:none !important; }