.livebar { background: var(--brand); color: #fff; position: sticky; top: 0; z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.livebar .wrap { display: flex; align-items: center; gap: 14px; height: 58px; }
.livebar .logo { font: 900 26px/1 'Frank Ruhl Libre', serif; color: #fff; text-decoration: none; }
.livebar .title { font-weight: 700; font-size: 18px; padding-right: 14px; border-right: 2px solid var(--gold); }
.pulse { margin-right: auto; font-size: 13px; opacity: .85; display: flex; align-items: center; gap: 7px; }
.pulse i { width: 9px; height: 9px; border-radius: 50%; background: #e0b252; animation: pulse 2s infinite; }
.pulse.off i { background: #999; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224,178,82,.7); } 70% { box-shadow: 0 0 0 9px rgba(224,178,82,0); } 100% { box-shadow: 0 0 0 0 rgba(224,178,82,0); } }

/* clip, not hidden: overflow hidden on the page turns off position: sticky */
html, body { overflow-x: clip; }
.livebar .wrap, .livegrid { max-width: 1220px; }
.livegrid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.feed { min-width: 0; }
.side { align-self: stretch; } /* as tall as the feed, so the ad has room to stay in view */
/* never taller than the screen: the ad shrinks on small screens, and the column scrolls by itself
   if even that is not enough */
.side .sticky { position: sticky; top: 74px; margin-top: 16px; max-height: calc(100vh - 90px); overflow-y: auto; }
.ad { position: relative; }
.ad a { display: block; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #0c1f45; }
.ad img { display: block; width: 100%; height: auto; }
.side .ad img { width: auto; max-width: 100%; max-height: calc(100vh - 300px); min-height: 220px; margin: 0 auto; object-fit: contain; }
.ad .adlabel { display: block; font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.adhere { margin-top: 12px; background: var(--card); border: 1px dashed var(--gold); border-radius: 10px; padding: 12px 14px; font-size: 14px; }
.adhere b { display: block; color: var(--brand); font-size: 16px; }
.adhere p { margin: 4px 0 6px; color: var(--muted); }
.adhere a { color: var(--brand); font-weight: 700; word-break: break-all; }
.ad-inline { display: none; margin-bottom: 10px; }
.ad-inline img { max-height: 520px; object-fit: contain; background: #0c1f45; }
@media (max-width: 900px) {
  .livegrid { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .ad-inline { display: block; }
}
.newbar { display: block; width: 100%; margin: 14px 0 0; background: var(--gold); }
.newbar[hidden] { display: none; }
.flashes { margin: 16px 0; }
.loading, .closed { text-align: center; color: var(--muted); padding: 60px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.closed h2 { margin-bottom: 8px; }

.flash > div { min-width: 0; }
.flash { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 0 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
.flash.fresh { animation: fresh 3s ease-out; }
@keyframes fresh { from { background: #fff5dc; } to { background: var(--card); } }
.flash .time { font: 700 18px/1.2 Heebo, sans-serif; color: var(--brand); text-align: center; padding-top: 2px; }
.flash .time small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }
.flash h3 { font-size: 19px; line-height: 1.35; margin: 0 0 4px; }
.flash .hot { display: inline-block; background: var(--bad); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 1px 7px; margin-left: 6px; vertical-align: 2px; }
.flash .cat { display: inline-block; color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.flash .lead { margin: 2px 0 0; }
.flash .unv { color: var(--muted); font-size: 13px; }
.flash .upd { list-style: none; padding: 0; margin: 10px 0 0; border-top: 1px solid var(--line); }
.flash .upd li { font-size: 14px; color: #3a404c; padding: 5px 0; border-bottom: 1px dashed var(--line); }
.flash .upd li b { color: var(--brand); font-weight: 500; margin-left: 6px; }
.flash .media { position: relative; margin-top: 10px; max-width: 560px; border-radius: 8px; overflow: hidden; background: #ddd; }
.flash .media img, .flash .media video { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; }
.flash .media.warn img, .flash .media.warn video { filter: blur(24px); }
.flash .media .cover { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: #fff; background: rgba(20,24,35,.6); font-weight: 700; cursor: pointer; padding: 10px; }
.flash .media figcaption { font-size: 12px; color: var(--muted); background: #faf8f3; padding: 4px 8px; }
.joinbox { background: #fbfaf6; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin: 20px 0; font-size: 15px; }
.joinbox a { color: var(--brand); font-weight: 700; }
@media (max-width: 600px) {
  .flash { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .flash .media { max-width: 100%; }
  .flash .time { text-align: right; display: flex; gap: 8px; align-items: baseline; }
  .flash .time small { margin: 0; }
  .livebar .title { display: none; }
}
.livebar .logo img { display: block; height: 44px; width: auto; background: #fff; border-radius: 6px; padding: 2px 6px; }
.livebar .back { display: flex; align-items: center; gap: 4px; align-self: stretch; background: var(--gold); color: #fff; font-weight: 700; padding: 0 10px 0 14px; margin-right: -16px; text-decoration: none; }
.livebar .back:hover { filter: brightness(.92); }