/* Daily Junction vendor-first rebuild, 2026-07-09
   2026-07-12: daisyUI 4 -> 5 token migration (--p/--bc/--b1.. don't exist in
   the v5 build; everything now reads --color-*), sticky two-tier nav +
   mobile drawer, Live TV + Arcade design pass. */
:root {
  --dj-max: 1320px;
  /* Legacy interactive-page aliases (quiz widgets predate the v5 rebuild and
     still read these). Keep them mapped onto daisyUI 5 theme tokens so the
     quiz chrome follows every skin instead of silently losing its styles.
     NB: never name one of these `--border` — daisyUI 5 uses --border as a
     LENGTH (1px) inside calc() for badge/btn padding and borders; overriding
     it with a colour invalidates those calcs and strips every pill's side
     padding sitewide (the 2026-07-12 "clipped eyebrows" bug). */
  --quiz-border: var(--color-base-300);
  --bg2: var(--color-base-200);
  --bg3: var(--color-base-300);
  --text: var(--color-base-content);
  --muted2: color-mix(in srgb, var(--color-base-content) 62%, transparent);
  --accent: var(--color-primary);
  --red: var(--color-error);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.dj-shell {
  min-height: 100vh;
}

.dj-wrap {
  width: min(var(--dj-max), calc(100% - 2rem));
  margin-inline: auto;
}

/* Inline SVG icon set (Lucide) — replaces emoji-as-icon sitewide. Inherits the
   text colour + sits on the text baseline; default ~1em, tunable per context. */
.dj-ico {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.18em;
  flex: none;
  stroke-width: 2;
}
.dj-ico-sm { width: 0.9em; height: 0.9em; }
.dj-ico-lg { width: 1.35em; height: 1.35em; }
.dj-ico-xl { width: 1.75em; height: 1.75em; }
/* Unmapped glyph passthrough (span, not svg) — size with the icon slot. */
span.dj-ico-emoji { width: auto; height: auto; font-size: 1em; line-height: 1; vertical-align: -0.05em; }
/* Toggled state for icon buttons (favourite/star/like): fill the stroke icon
   instead of swapping in a different glyph — JS toggles .is-on only. */
.is-on > .dj-ico, button[aria-pressed="true"] > .dj-ico { fill: currentColor; }

.dj-prose {
  color: color-mix(in srgb, var(--color-base-content) 86%, transparent);
  font-size: 1rem;
  line-height: 1.8;
}

.dj-prose > * + * {
  margin-top: 1rem;
}

.dj-prose h2,
.dj-prose h3,
.dj-prose h4 {
  color: var(--color-base-content);
  font-family: inherit;
  line-height: 1.2;
  margin-top: 2rem;
}

.dj-prose h2 {
  font-size: 1.65rem;
  font-weight: 800;
}

.dj-prose h3 {
  font-size: 1.3rem;
  font-weight: 700;
}

.dj-prose ul,
.dj-prose ol {
  padding-left: 1.25rem;
}

.dj-prose ul {
  list-style: disc;
}

.dj-prose ol {
  list-style: decimal;
}

.dj-prose blockquote {
  border-left: 4px solid var(--color-primary);
  padding-left: 1rem;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
}

.dj-prose a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dj-prose img {
  width: 100%;
  border-radius: 1rem;
}

.dj-prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
}

.dj-prose th,
.dj-prose td {
  border: 1px solid var(--color-base-300);
  padding: 0.65rem 0.75rem;
  text-align: left;
}

.dj-prose code {
  border-radius: 0.4rem;
  background: var(--color-base-200);
  padding: 0.15rem 0.4rem;
  font-size: 0.92em;
}

.dj-prose pre {
  overflow-x: auto;
  border-radius: 1rem;
  background: var(--color-neutral);
  color: var(--color-neutral-content);
  padding: 1rem;
}

.dj-hero-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.dj-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dj-card-thumb {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.dj-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dj-ticker {
  --ticker-gap: 1.5rem;
}

.dj-ticker-track {
  position: relative;
}

.dj-ticker-inner {
  width: max-content;
  animation: dj-ticker-scroll 28s linear infinite;
}

.dj-ticker:hover .dj-ticker-inner {
  animation-play-state: paused;
}

@keyframes dj-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.live-readers {
  white-space: nowrap;
}

.reading-now-dot {
  display: inline-flex;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 9999px;
  background: var(--color-primary);
  box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
  animation: reading-pulse 1.6s ease-in-out infinite;
  flex: 0 0 auto;
}

@keyframes reading-pulse {
  0% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.42); }
  70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
  100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
}

.sticky-article-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  padding: 0.75rem;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.sticky-article-bar.is-visible,
.sticky-article-bar--visible,
.sticky-article-bar[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.sticky-article-bar__inner {
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  max-width: 1100px;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-base-100) 94%, transparent);
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(12px);
}

.exit-popup,
.nl-sticky,
.nl-timed {
  position: fixed;
  z-index: 80;
}

.exit-popup {
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.52);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.exit-popup.exit-popup--visible {
  opacity: 1;
  pointer-events: auto;
}

.exit-popup-panel,
.nl-sticky-panel,
.nl-timed-panel {
  position: relative;
  border: 1px solid var(--color-base-300);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}

.exit-popup-panel {
  width: min(28rem, 100%);
  padding: 1.25rem;
}

.exit-popup-close,
.nl-timed-close {
  position: absolute;
  top: 0.75rem;
  right: 0.85rem;
  border: 0;
  background: transparent;
  color: var(--color-base-content);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.nl-sticky {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.75rem;
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nl-sticky.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nl-sticky-panel {
  margin-inline: auto;
  display: grid;
  max-width: 1040px;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
}

.nl-sticky-form {
  display: flex;
  gap: 0.5rem;
}

.nl-timed {
  right: 1rem;
  bottom: 1rem;
  width: min(20rem, calc(100vw - 1.5rem));
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nl-timed.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nl-timed-panel {
  padding: 0.9rem;
}

.reading-now-text {
  letter-spacing: -0.01em;
}

.reading-now-text::before {
  content: '';
}

.reading-now-text::after {
  content: '';
}

@media (max-width: 768px) {
  .sticky-article-bar {
    padding: 0.5rem;
  }

  .sticky-article-bar__inner {
    align-items: stretch;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
  }

  .nl-sticky {
    padding: 0.5rem;
  }

  .nl-sticky-panel {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .nl-sticky-form {
    flex-direction: column;
  }

  .nl-timed {
    right: 0.5rem;
    bottom: 0.5rem;
    width: min(18rem, calc(100vw - 1rem));
  }

  .exit-popup {
    padding: 0.5rem;
  }

  .exit-popup-panel {
    width: min(100%, 24rem);
    padding: 1rem;
  }
}

.read-nudge {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 75;
  width: min(42rem, calc(100vw - 2rem));
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.read-nudge--visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.read-nudge--hidden {
  transform: translate(-50%, 120%);
  opacity: 0;
  pointer-events: none;
}

.tag-cloud-1{font-size:.95em}
.tag-cloud-2{font-size:1.1em}
.tag-cloud-3{font-size:1.25em}
.tag-cloud-4{font-size:1.4em}

.dj-footer-links a {
  text-decoration: none;
}

.dj-footer-links a:hover {
  text-decoration: underline;
}

/* Interactive pages */
.quiz-diff-btn{padding:4px 11px;border:1px solid var(--quiz-border);background:var(--bg2);color:var(--muted2);font-size:11.5px;font-weight:700;cursor:pointer}
.quiz-diff-btn--active{background:var(--accent);border-color:var(--accent);color:#fff}
.quiz-q-difficulty{display:inline-block;margin-left:6px;padding:1px 7px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle;background:var(--bg3);color:var(--muted2);border:1px solid var(--quiz-border)}
.quiz-q-difficulty--easy{color:#3fb950;border-color:#3fb950}
.quiz-q-difficulty--medium{color:#b59f3b;border-color:#b59f3b}
.quiz-q-difficulty--hard{color:var(--red,#da3633);border-color:var(--red,#da3633)}
.quiz-speedrun-toggle{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted2);margin-top:10px;cursor:pointer;user-select:none}
.quiz-timer{display:inline-block;margin-left:10px;font-size:12.5px;font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.quiz-result-time{font-size:12.5px;color:var(--muted2);margin-bottom:10px}
.quiz-share-card{max-width:100%;height:auto;border:1px solid var(--quiz-border);margin:0 auto 14px;display:block}
.quiz-leaderboard{margin-top:18px;padding-top:14px;border-top:1px solid var(--quiz-border);text-align:left}
.quiz-leaderboard-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted2);margin-bottom:8px}
.quiz-leaderboard-list{list-style:decimal;padding-left:18px;margin:0;font-size:12.5px;color:var(--text);display:flex;flex-direction:column;gap:4px}
/* ---- Arcade (games hub + play pages) ---- */
.arc-random-btn{padding:10px 18px;border:0;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:transform .15s ease}
.arc-random-btn:hover{transform:translateY(-1px) scale(1.02)}
.arc-controls{display:flex;flex-direction:column;gap:14px}
.arc-search-wrap{position:relative;max-width:440px}
.arc-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6;pointer-events:none}
.arc-search{width:100%;padding:11px 16px 11px 40px;border:1.5px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:var(--color-base-content);font-size:14px}
.arc-search:focus{outline:2px solid var(--color-primary);outline-offset:1px;border-color:var(--color-primary)}
.arc-chips{display:flex;flex-wrap:wrap;gap:8px}
.arc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:#475569;font-size:12.5px;font-weight:700;text-decoration:none;cursor:pointer;transition:all .15s ease}
.arc-chip:hover{border-color:var(--color-primary);color:var(--color-base-content)}
.arc-chip.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.arc-chip-count{font-size:10.5px;font-weight:800;opacity:.65}
.arc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.arc-rail{display:grid;grid-auto-flow:column;grid-auto-columns:200px;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity}
.arc-rail .arc-card{scroll-snap-align:start}
.arc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--color-base-300);border-radius:14px;background:var(--color-base-100);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .18s ease,box-shadow .18s ease}
.arc-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.13)}
.arc-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--color-base-200)}
.arc-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.arc-card:hover .arc-thumb img{transform:scale(1.06)}
.arc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.9rem;color:#fff;background:rgba(0,0,0,.18);opacity:0;transition:opacity .18s ease}
.arc-card:hover .arc-play{opacity:1}
.arc-card-body{display:flex;flex:1;flex-direction:column;gap:4px;padding:10px 12px 12px}
.arc-card-body h3{font-size:13.5px;font-weight:800;line-height:1.35;margin:0}
.arc-card-body h3 a{color:var(--color-base-content);text-decoration:none}
.arc-card-body h3 a:hover{color:var(--color-primary)}
.arc-card-desc{font-size:12px;color:#475569;line-height:1.5;margin:2px 0 0}
.arc-card--hero .arc-thumb{aspect-ratio:16/9}
.arc-card--hero .arc-card-body h3{font-size:1.15rem}
.arc-cat-badge{display:inline-flex;align-items:center;gap:4px;width:fit-content;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--color-primary);text-decoration:none}
.arc-fav{position:absolute;top:8px;right:8px;z-index:2;width:32px;height:32px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:#c0303c;font-size:15px;line-height:1;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:transform .15s ease}
.arc-fav:hover{transform:scale(1.15)}
.arc-fav.on{background:#c0303c;color:#fff}
.arc-player-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;max-width:100%}
.arc-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;padding:9px 15px;border:1.5px solid var(--color-base-300);border-radius:999px;background:var(--color-base-100);color:var(--color-base-content);font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .15s ease}
.arc-action-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.arc-action-btn.on{background:#c0303c;border-color:#c0303c;color:#fff}
#arc-player:fullscreen{border-radius:0;border:0}
#arc-player:fullscreen iframe{width:100vw;height:100vh}
.arc-name-input{max-width:240px}
.arc-chat-name-input{max-width:150px}
.arc-play-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.arc-play-stat{border:1px solid var(--color-base-300);border-radius:14px;background:var(--color-base-200);padding:12px}
.arc-play-stat span{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#64748b}
.arc-play-stat strong{display:block;margin-top:3px;font-size:1.15rem;color:var(--color-base-content)}
.arc-player-panel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--color-base-300);border-radius:16px;background:var(--color-base-200);padding:14px}
.arc-player-claim{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.arc-player-msg{min-height:18px;font-size:12.5px;color:#c0303c}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.arc-empty{font-size:14px}
@media (max-width:480px){
  .arc-player-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .arc-action-btn{width:100%;padding-inline:8px;font-size:12px}
  .arc-player-panel{align-items:stretch}
  .arc-player-claim,.arc-name-input{width:100%;max-width:100%}
}

/* ===================================================================
   Live TV portal (/live, /live/{id}) — 2026-07-12
   =================================================================== */

.tv-h1-live {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  padding: 0.2rem 0.65rem;
  border-radius: 0.6rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  transform: translateY(-0.35rem);
}

/* Studio shell: player + chat, dark chrome component on the light page */
.tv-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 0;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid #1c2330;
  background: #0e131b;
  box-shadow: 0 18px 45px -18px rgba(10, 16, 28, 0.55);
}
@media (max-width: 1023px) {
  .tv-shell { grid-template-columns: minmax(0, 1fr); }
}

.tv-stage { min-width: 0; }

.tv-player-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.tv-player-wrap video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}
.tv-player-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem 1.4rem;
  background: linear-gradient(180deg, rgba(0,0,0,0.65), transparent);
  color: #fff;
  pointer-events: none;
  font-size: 0.85rem;
}
.tv-player-label { font-weight: 700; letter-spacing: 0.01em; }
.tv-player-status { margin-left: auto; opacity: 0.85; }

.tv-live-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.6);
  animation: tv-pulse 1.8s infinite;
}
@keyframes tv-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
}

/* Info bar under the player */
.tv-infobar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.4rem;
  padding: 0.9rem 1.25rem;
  color: #e8edf6;
  border-top: 1px solid #1c2330;
}
.tv-infobar-id {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.tv-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  font-size: 1.35rem;
  background: linear-gradient(140deg, var(--tv-accent, #1257a5), color-mix(in srgb, var(--tv-accent, #1257a5) 55%, #0e131b));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.tv-avatar-logo {
  width: 82%;
  height: 82%;
  object-fit: contain;
  border-radius: 0.45rem;
}
.tv-avatar-logo.is-light-logo {
  background: rgba(0, 0, 0, 0.32);
  border-radius: 0.45rem;
}
.tv-infobar-name { font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.tv-infobar-sub { font-size: 0.78rem; color: #97a3b8; margin-top: 2px; }

.tv-infobar-epg { min-width: 0; flex: 1 1 220px; }
.tv-epg-now, .tv-epg-next {
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-epg-next { color: #97a3b8; }
.tv-epg-tag {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 0.45rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  vertical-align: 1px;
}
.tv-epg-tag--next { background: #2c3a52; }

.tv-infobar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.tv-infobar-actions .btn {
  border-color: #2c3a52;
  color: #e8edf6;
  background: transparent;
}
.tv-like-btn { gap: 0.35rem; }
.tv-action-logo {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 1px;
}
.tv-action-logo.is-light-logo {
  background: #1b2333;
}
.tv-infobar-actions .btn:hover { border-color: #4a5d80; background: #1a2230; }
.tv-infobar-actions .btn.btn-active { background: #22314a; border-color: #4a5d80; }
.tv-watching {
  font-size: 0.78rem;
  color: #97a3b8;
  white-space: nowrap;
}

/* Chat panel */
.tv-chat {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid #1c2330;
  background: #10161f;
  color: #e8edf6;
}
@media (max-width: 1023px) {
  .tv-chat { border-left: 0; border-top: 1px solid #1c2330; height: 24rem; }
}
.tv-chat-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #1c2330;
  font-size: 0.9rem;
}
.tv-chat-room {
  margin-left: auto;
  font-size: 0.72rem;
  color: #97a3b8;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-chat-body {
  flex: 1;
  min-height: 14rem;
  overflow-y: auto;
  padding: 0.8rem 1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  overscroll-behavior: contain;
}
.tv-chat-msg { margin-bottom: 0.45rem; word-wrap: break-word; }
.tv-chat-who {
  font-weight: 700;
  color: hsl(var(--who-h, 210), 65%, 70%);
}
.tv-chat-who::after { content: ':'; color: #97a3b8; font-weight: 400; }
.tv-chat-ai,
.dj-ai-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--color-primary, #1257a5) 28%, transparent);
  border-radius: 999px;
  color: var(--color-primary, #1257a5);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.15rem 0.4rem;
  text-transform: uppercase;
}
.tv-chat-ai {
  margin: 0 0.25rem;
  border-color: #31425f;
  color: #aab8d4;
}
.tv-chat-empty { color: #97a3b8; font-size: 0.82rem; }
.tv-chat-form { padding: 0.75rem 1rem 0.9rem; border-top: 1px solid #1c2330; }
.tv-chat-form input[type="text"] {
  width: 100%;
  border: 1px solid #2c3a52;
  background: #0e131b;
  color: #e8edf6;
  border-radius: 0.8rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.84rem;
  outline: none;
}
.tv-chat-form input[type="text"]:focus { border-color: #4a5d80; }
.tv-chat-form input#tv-chat-name { max-width: 10rem; margin-bottom: 0.5rem; }
.tv-chat-row { display: flex; gap: 0.5rem; }
.tv-chat-row input { flex: 1; min-width: 0; }
.tv-chat-note { margin-top: 0.5rem; font-size: 0.7rem; color: #97a3b8; }

/* Category tabs */
.tv-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}
.tv-tab {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tv-tab:hover { border-color: var(--color-primary); }
.tv-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}

/* Channel tiles */
.tv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.9rem;
}
.tv-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
  transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.tv-tile:hover {
  transform: translateY(-3px);
  border-color: var(--tv-accent, #1257a5);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--tv-accent, #1257a5) 55%, transparent);
}
.tv-tile.is-active { border-color: var(--tv-accent, #1257a5); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tv-accent, #1257a5) 45%, transparent); }
.tv-tile-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  font-size: 2.1rem;
  background:
    radial-gradient(120% 130% at 20% 0%, color-mix(in srgb, var(--tv-accent, #1257a5) 88%, #fff) 0%, var(--tv-accent, #1257a5) 55%, color-mix(in srgb, var(--tv-accent, #1257a5) 55%, #000) 100%);
}
.tv-tile-logo {
  width: min(72%, 8.5rem);
  height: 54%;
  object-fit: contain;
  padding: 0.45rem 0.65rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px -18px rgba(0, 0, 0, 0.8);
}
/* A logo that's actually light/white on transparent (sampled client-side —
   see djLogoLuminanceScan in play-app.js / livetv-portal.js) gets a dark
   plate instead of white, so it stays readable. No filters, no shadows. */
.tv-tile-logo.is-light-logo {
  background: #1b2333;
}
.tv-tile-icon { position: relative; z-index: 1; }
/* Fallback initial shown when a channel logo image fails to load. */
.tv-logo-fallback {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(56%, 5.4rem);
  aspect-ratio: 1 / 1;
  border-radius: 0.85rem;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tv-accent, #1257a5) 92%, #fff), color-mix(in srgb, var(--tv-accent, #1257a5) 62%, #0e131b));
  color: #fff;
  font-weight: 800;
  font-size: 1.9rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 22px -16px rgba(0, 0, 0, 0.7);
}
.tv-avatar .tv-logo-fallback {
  width: 100%;
  border-radius: 12px;
  font-size: 1.25rem;
  box-shadow: none;
  background: transparent;
}
.tv-tile-live {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  padding: 0.1rem 0.42rem;
  border-radius: 0.4rem;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.tv-tile-live::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.28rem;
  border-radius: 50%;
  background: #ff3b30;
  vertical-align: 1px;
}
.tv-tile-fav {
  position: absolute;
  right: 0.45rem;
  top: 0.35rem;
  padding: 0.15rem 0.4rem;
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s;
}
.tv-tile-fav:hover { transform: scale(1.2); }
.tv-tile-fav.is-on { color: #ffd83d; }
.tv-tile-body { padding: 0.6rem 0.75rem 0.7rem; }
.tv-tile-name {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
}
.tv-tile-now {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tv-grid-empty { padding: 2.5rem 0; text-align: center; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }

/* Coming up list */
.tv-upcoming { display: grid; gap: 0.35rem; }
.tv-upcoming-item {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0.25rem 0.9rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.9rem;
  border: 1px solid transparent;
}
.tv-upcoming-item.is-now {
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}
.tv-upcoming-time { font-weight: 800; font-size: 0.85rem; color: var(--color-primary); }
.tv-upcoming-title { font-weight: 600; font-size: 0.92rem; }
.tv-upcoming-desc {
  grid-column: 2;
  font-size: 0.8rem;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  line-height: 1.5;
}

/* ===================================================================
   TV Guide grid (/tv-guide)
   =================================================================== */

.tvg-scroll { overflow-x: auto; padding-bottom: 0.5rem; }
.tvg { min-width: 980px; }

.tvg-ruler,
.tvg-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: stretch;
}
.tvg-ruler { position: sticky; top: 0; z-index: 2; background: var(--color-base-100); }
.tvg-times {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  border-bottom: 1px solid var(--color-base-300);
}
.tvg-time {
  font-size: 0.72rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  padding: 0.35rem 0 0.45rem 0.4rem;
  border-left: 1px dashed var(--color-base-300);
}
.tvg-nowline {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((var(--now-col, 1) - 1) / 360 * 100%);
  width: 2px;
  background: #e11d2e;
  z-index: 3;
}

.tvg-row { border-bottom: 1px solid var(--color-base-200); }
.tvg-row:last-child { border-bottom: 0; }

.tvg-ch {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem 0.55rem 0.2rem;
  min-width: 0;
}
.tvg-ch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 10px;
  font-size: 1rem;
  background: linear-gradient(140deg, var(--tv-accent, #1257a5), color-mix(in srgb, var(--tv-accent, #1257a5) 55%, #000));
}
.tvg-ch-name {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tvg-ch:hover .tvg-ch-name { color: var(--color-primary); }
.tvg-ch-live {
  margin-left: auto;
  padding: 0.08rem 0.4rem;
  border-radius: 0.4rem;
  background: #e11d2e;
  color: #fff;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  flex: none;
}

.tvg-lane {
  display: grid;
  grid-template-columns: repeat(360, minmax(0, 1fr));
  grid-auto-rows: minmax(3.1rem, auto);
  gap: 3px 2px;
  padding: 4px 0;
  border-left: 1px dashed var(--color-base-300);
}
.tvg-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  padding: 0.3rem 0.55rem;
  border-radius: 0.6rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-200);
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.tvg-block:hover { border-color: var(--color-primary); }
.tvg-block.is-now {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-base-300));
}
.tvg-block-title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tvg-block-time { font-size: 0.66rem; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.tvg-block--always .tvg-block-title { white-space: normal; }

/* ===================================================================
   Watch page actions (YouTube-style bar) + watch-later
   =================================================================== */

.watch-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.watch-actions .btn.btn-active { border-color: var(--color-primary); color: var(--color-primary); }

.wl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.wl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}
.wl-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: #000; }
.wl-body { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.7rem 0.85rem 0.85rem; }
.wl-title { font-weight: 700; font-size: 0.9rem; line-height: 1.3; }
.wl-meta { font-size: 0.74rem; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.wl-remove { align-self: flex-start; margin-top: 0.35rem; }
.wl-empty { padding: 3.5rem 1rem; text-align: center; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }

/* Live TV nav pill */
.dj-nav-live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
  font-weight: 700;
}
.dj-nav-live:hover { background: #c4131f; border-color: #c4131f; color: #fff; }

/* ===================================================================
   Sitewide navigation — sticky two-tier header + scroll strip + drawer
   (2026-07-12 rebuild: replaces the wrapping badge-pill wall)
   =================================================================== */

.dj-header {
  position: sticky;
  top: 0;
  z-index: 80;
  will-change: transform;
}

.dj-topbar .dj-ticker {
  margin-bottom: 0.65rem;
  padding: 0.5rem 1rem;
}

.dj-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  margin-right: 0.35rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.75rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dj-burger:hover { border-color: var(--color-primary); color: var(--color-primary); }
/* These two are mobile-only chrome. Don't lean on the compiled lg:hidden
   utility: style.css loads after tailwind.css, so the component display rules
   above would win the cascade at equal specificity. */
@media (min-width: 1024px) {
  .dj-burger { display: none; }
  .dj-live-cta { display: none; }
  /* compress pills a touch so the full strip fits the 1200px container
     (track-scoped so this outranks the base .dj-nav-pill rule below) */
  .dj-navstrip-track .dj-nav-pill { font-size: 0.8rem; padding: 0.34rem 0.7rem; }
  .dj-navstrip-track { gap: 0.3rem; }
}

.dj-masthead {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.dj-masthead-logo {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 0.85rem;
}
.dj-masthead-name {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: nowrap;
}
.dj-masthead-tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--color-base-content) 60%, transparent);
  white-space: nowrap;
}
@media (max-width: 420px) {
  .dj-masthead-tag { display: none; }
  .dj-masthead-name { font-size: 1.1rem; }
  .dj-masthead-logo { width: 2.4rem; height: 2.4rem; }
}

.dj-live-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  margin-left: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: #e11d2e;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.dj-live-cta:hover { background: #c4131f; color: #fff; }
.dj-live-cta-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  animation: tv-pulse 1.8s infinite;
}

/* --- tier 2: the strip. One row, scrolls sideways instead of wrapping. --- */
.dj-navstrip {
  border-top: 1px solid var(--color-base-300);
  background: var(--color-base-100);
}
.dj-navstrip .dj-wrap { position: relative; }
.dj-navstrip-track {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0.55rem 0;
  scroll-snap-type: x proximity;
}
.dj-navstrip-track::-webkit-scrollbar { display: none; }
/* soft fade hinting more items off-screen (harmless when nothing clips) */
.dj-navstrip .dj-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2.2rem;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--color-base-100));
}

.dj-nav-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-100);
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.dj-nav-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dj-nav-pill.is-active {
  background: var(--color-neutral);
  border-color: var(--color-neutral);
  color: var(--color-neutral-content);
}
.dj-nav-pill--wire {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}
.dj-nav-pill--wire:hover { color: var(--color-primary-content); opacity: 0.92; }
.dj-nav-pill--live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--live:hover { background: #c4131f; border-color: #c4131f; color: #fff; }
.dj-nav-pill--videos {
  background: #6d28d9;
  border-color: #6d28d9;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--videos:hover { background: #5b21b6; border-color: #5b21b6; color: #fff; }
.dj-nav-pill--arcade {
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
  font-weight: 800;
}
.dj-nav-pill--arcade:hover { background: #0f766e; border-color: #0f766e; color: #fff; }
.dj-nav-pill--live.is-active,
.dj-nav-pill--videos.is-active,
.dj-nav-pill--arcade.is-active,
.dj-nav-pill--wire.is-active { outline: 2px solid var(--color-neutral); outline-offset: 1px; }
/* Coloured nav-pill icons sit inside the pill; size to the label. */
.dj-nav-pill .dj-ico { width: 0.95rem; height: 0.95rem; }
.dj-navstrip-sep {
  flex: none;
  width: 1px;
  height: 1.2rem;
  background: var(--color-base-300);
  margin: 0 0.2rem;
}

/* --- mobile drawer panel --- */
.dj-drawer-side { z-index: 120; }
.dj-drawer-side .drawer-overlay { background: rgba(15, 23, 42, 0.45); }
.dj-drawer-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: min(20rem, 86vw);
  min-height: 100%;
  padding: 1rem 1.1rem 2rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 0 60px rgba(10, 16, 28, 0.35);
}
.dj-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--color-base-300);
}
.dj-drawer-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 0.7rem;
  background: var(--color-base-100);
  cursor: pointer;
}
.dj-drawer-close:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dj-drawer-search { width: 100%; }
.dj-drawer-nav { display: flex; flex-direction: column; gap: 0.35rem; overflow-y: auto; }
.dj-drawer-title {
  margin-top: 0.65rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.dj-drawer-list { display: flex; flex-direction: column; }
.dj-drawer-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  color: color-mix(in srgb, var(--color-base-content) 90%, transparent);
}
.dj-drawer-list a:hover { background: var(--color-base-200); color: var(--color-primary); }
.dj-drawer-live { color: #e11d2e !important; }
.dj-drawer-live .dj-live-cta-dot { background: #e11d2e; box-shadow: 0 0 0 0 rgba(225, 29, 46, 0.5); }
body.dj-noscroll { overflow: hidden; }

/* ===================================================================
   Live TV hero (dark studio card, matches the shell below)
   =================================================================== */

.tv-hero {
  position: relative;
  overflow: hidden;
  border-radius: 1.1rem;
  border: 1px solid #1c2330;
  background:
    radial-gradient(90% 140% at 85% -20%, rgba(225, 29, 46, 0.28) 0%, transparent 55%),
    radial-gradient(70% 120% at 10% -10%, rgba(18, 87, 165, 0.35) 0%, transparent 60%),
    #0e131b;
  color: #e8edf6;
  padding: 1.5rem;
  box-shadow: 0 18px 45px -18px rgba(10, 16, 28, 0.55);
}
@media (min-width: 640px) { .tv-hero { padding: 2rem 2.25rem; } }
.tv-hero .tv-breadcrumb,
.tv-hero .tv-breadcrumb a { color: #97a3b8; }
.tv-hero .tv-breadcrumb a:hover { color: #fff; }
.tv-hero-title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #fff;
}
.tv-hero-sub {
  margin-top: 0.6rem;
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.7;
  color: #aab8d4;
}
.tv-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.1rem;
}
.tv-hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid #2c3a52;
  border-radius: 999px;
  color: #e8edf6;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s;
}
a.tv-hero-chip:hover { border-color: #4a5d80; background: #1a2230; color: #fff; }
.tv-hero-chip--live {
  background: #e11d2e;
  border-color: #e11d2e;
  color: #fff;
}

/* tabs: never wrap into a wall on phones — scroll like the nav strip */
@media (max-width: 767px) {
  .tv-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .tv-tabs::-webkit-scrollbar { display: none; }
  .tv-tab { flex: none; white-space: nowrap; }
}

/* infobar: tidy stacking on small screens */
@media (max-width: 640px) {
  .tv-infobar { gap: 0.7rem 1rem; padding: 0.85rem 1rem; }
  .tv-infobar-epg { flex-basis: 100%; order: 3; }
  .tv-infobar-actions { margin-left: 0; order: 4; }
}

/* ===================================================================
   Arcade design pass — hero, chips strip, rails, lounge chat, play page
   =================================================================== */

.arc-hero {
  position: relative;
  overflow: hidden;
}
.arc-hero::before {
  content: '🕹️';
  position: absolute;
  right: -0.6rem;
  top: -1.4rem;
  font-size: 7.5rem;
  opacity: 0.07;
  transform: rotate(12deg);
  pointer-events: none;
}
.arc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.arc-player-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-200);
  font-size: 0.82rem;
  font-weight: 700;
}

/* chips: wrap on desktop, single scrollable row on phones */
@media (max-width: 767px) {
  .arc-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.3rem;
    scroll-snap-type: x proximity;
  }
  .arc-chips::-webkit-scrollbar { display: none; }
  .arc-chip { flex: none; scroll-snap-align: start; }
}
.arc-chip { color: color-mix(in srgb, var(--color-base-content) 72%, transparent); }
.arc-chip:hover { color: var(--color-base-content); }
.arc-chip.active { color: var(--color-primary-content); }
.arc-card-desc { color: color-mix(in srgb, var(--color-base-content) 66%, transparent); }
.arc-play-stat span { color: color-mix(in srgb, var(--color-base-content) 58%, transparent); }

/* rails: Swiper-enhanced when JS is up, plain scroll rail otherwise */
.arc-rail.swiper { grid-auto-flow: unset; display: block; overflow: hidden; padding-bottom: 0; }
.arc-rail.swiper .swiper-slide { width: 200px; }
.arc-rail .swiper-button-prev,
.arc-rail .swiper-button-next {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  color: var(--color-base-content);
  transition: border-color 0.15s, color 0.15s;
}
.arc-rail .swiper-button-prev:hover,
.arc-rail .swiper-button-next:hover { border-color: var(--color-primary); color: var(--color-primary); }
.arc-rail .swiper-button-prev::after,
.arc-rail .swiper-button-next::after { font-size: 0.85rem; font-weight: 800; }
.arc-rail .swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 767px) {
  .arc-rail .swiper-button-prev,
  .arc-rail .swiper-button-next { display: none; }
}

/* lounge chat: give the message box real chrome (was unstyled) */
.arc-chat {
  height: 16rem;
  overflow-y: auto;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.55;
  overscroll-behavior: contain;
}
.arc-chat-row { margin-bottom: 0.4rem; word-wrap: break-word; }
.arc-chat-row strong { color: var(--color-primary); font-weight: 700; }
.arc-chat-time {
  display: inline-block;
  margin-right: 0.4rem;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-base-content) 45%, transparent);
}
.arc-chat-form { display: flex; gap: 0.5rem; }
.arc-chat-form .arc-search { border-radius: 999px; }
.arc-chat-form input#arc-chat-body { flex: 1; min-width: 0; }

/* leaderboard rows */
.arc-lb { display: flex; flex-direction: column; gap: 0.3rem; }
.arc-lb li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
  background: var(--color-base-100);
  font-size: 0.9rem;
}
.arc-lb li:nth-child(1) { background: color-mix(in srgb, #ffd83d 12%, var(--color-base-100)); }
.arc-lb-rank { flex: none; width: 2.1rem; font-weight: 800; }
.arc-lb-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.arc-lb-pts { margin-left: auto; flex: none; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.arc-lb-empty { justify-content: center; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); }
.arc-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.arc-me {
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
  background: var(--color-base-200);
  font-size: 0.88rem;
  font-weight: 600;
}

/* play page: the compiled utility set predates rounded-[1.5rem]/aspect-[3/4],
   so the player frame styles them here instead */
#arc-player { border-radius: 1rem; }
#arc-player.arc-player--tall { aspect-ratio: 3 / 4; }
#arc-player.arc-player--wide { aspect-ratio: 16 / 9; }

/* ===================================================================
   Bottom-dock coordination (2026-07-12) — cookie banner, newsletter
   sticky, read-nudge and the reading bar all dock to the viewport
   bottom; djDock (layout.php) lets exactly ONE through at a time.
   =================================================================== */

.dj-dock-suppressed {
  opacity: 0 !important;
  transform: translateY(130%) !important;
  pointer-events: none !important;
}

/* corner surfaces ride above whatever currently owns the dock */
.nl-timed { bottom: calc(1rem + var(--dj-dock-h, 0px)); }
@media (max-width: 768px) {
  .nl-timed { bottom: calc(0.5rem + var(--dj-dock-h, 0px)); }
}

/* read-nudge was a positioned wrapper with NO panel chrome — raw text
   floated over the page. Give it the standard card treatment. */
.read-nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.88rem;
  line-height: 1.5;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
.read-nudge-icon { flex: none; font-size: 1.15rem; }
.read-nudge-msg { flex: 1 1 auto; min-width: 0; }
.read-nudge-cta {
  flex: none;
  color: var(--color-primary);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.read-nudge-cta:hover { text-decoration: underline; }
.read-nudge-close {
  flex: none;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--color-base-content);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.15rem;
}
@media (max-width: 640px) {
  .read-nudge { flex-wrap: wrap; font-size: 0.84rem; }
}

/* exit-popup kicker (was unstyled) */
.exit-popup-kicker {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  margin-bottom: 0.35rem;
}

/* reading-bar internals: the compiled utility set predates h-1.5 /
   transition-[width] / tracking-[0.2em], so the label + progress track
   get real classes here (markup carries them alongside the utilities) */
.sticky-bar-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}
.sticky-bar-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-base-300);
}
#sticky-bar-prog {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}

/* search autocomplete flyout (was completely unstyled) */
.search-ac {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 90;
  overflow: hidden;
  border: 1px solid var(--color-base-300);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
}
.search-ac li a {
  display: block;
  padding: 0.55rem 0.85rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-ac li + li a { border-top: 1px solid var(--color-base-200); }
.search-ac li a:hover { background: var(--color-base-200); color: var(--color-primary); }

/* ===================================================================
   SITEWIDE CLASS-COVERAGE REPAIR — 2026-07-12 audit
   The compiled tailwind bundle predates many templates; every class
   below is used in live markup but had NO definition anywhere.
   Sections: form controls, utility shim, quiz, video cards, TOC,
   ads/badges/misc. Single source of truth: this file.
   =================================================================== */

/* ---- form controls (root cause of the invisible Discussion form) ---- */
/* The compiled daisy bundle ships .input/.select with NO border — text
   fields rendered invisible on white cards. Border + focus ring here are
   authoritative; radius/height stay with the bundle so .join corner
   grouping keeps working. (.search-mini input keeps its own look.) */
.input, .select {
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  background: var(--color-base-100);
  transition: border-color 0.15s;
}
.input:focus, .select:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
.textarea {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.92rem;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  outline-offset: 1px;
  border-color: var(--color-primary);
}
/* advertise forms alias — same look as .textarea */
textarea.dj-ta, .dj-ta {
  display: block;
  width: 100%;
  min-height: 6.5rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 20%, transparent);
  border-radius: 0.9rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.92rem;
  line-height: 1.6;
}
.dj-ta:focus { outline: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent); border-color: var(--color-primary); }
/* daisyUI 4 leftovers still in markup — map to sane v5 equivalents */
.form-control { display: flex; flex-direction: column; gap: 0.35rem; }
.label-text { font-size: 0.85rem; font-weight: 600; color: color-mix(in srgb, var(--color-base-content) 80%, transparent); }
.checkbox-xs { width: 1rem; height: 1rem; }
.table-sm th, .table-sm td { padding: 0.4rem 0.6rem; font-size: 0.85rem; }

/* ---- missing utility shim (exact Tailwind equivalents) ---- */
.-mt-6 { margin-top: -1.5rem; }
.space-y-10 > * + * { margin-top: 2.5rem; }
.leading-5 { line-height: 1.25rem; }
.h-6 { height: 1.5rem; } .h-10 { height: 2.5rem; } .h-12 { height: 3rem; } .h-24 { height: 6rem; }
.w-0 { width: 0; } .w-6 { width: 1.5rem; } .w-10 { width: 2.5rem; } .w-12 { width: 3rem; } .w-40 { width: 10rem; }
.w-2\/5 { width: 40%; }
.text-error { color: var(--color-error); }
.border-primary { border-color: var(--color-primary); }
.text-base-content\/80 { color: color-mix(in srgb, var(--color-base-content) 80%, transparent); }
.bg-warning\/10 { background-color: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.border-warning\/40 { border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }
.ring-base-100 { --tw-ring-color: var(--color-base-100); }
.tracking-\[0\.15em\] { letter-spacing: 0.15em; }
.tracking-\[0\.25em\] { letter-spacing: 0.25em; }
.rounded-\[1\.25rem\] { border-radius: 0.9rem; }
.select-all { user-select: all; }
.break-all { word-break: break-all; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.not-prose { /* typography-escape marker; no styles by design */ }
.hover\:border-primary:hover { border-color: var(--color-primary); }
.hover\:text-error:hover { color: var(--color-error); }
.hover\:badge-primary:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }
.placeholder\:text-base-content\/40::placeholder { color: color-mix(in srgb, var(--color-base-content) 40%, transparent); }
@media (min-width: 640px) {
  .sm\:grid-cols-\[1fr_140px\] { grid-template-columns: 1fr 140px; }
}
@media (min-width: 1024px) {
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:inline-flex { display: inline-flex; }
}
/* steps + boxed tabs (advertise/sport pages) — compact standalone versions */
.steps { display: flex; flex-direction: column; gap: 0.9rem; counter-reset: dj-step; }
.steps .step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  counter-increment: dj-step;
}
.steps .step::before {
  content: counter(dj-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  font-size: 0.8rem;
  font-weight: 800;
  /* This is a hand-built component sharing daisyUI's .steps/.step class
     names for an unrelated grid+icon-based component. Cascade layers make
     this unlayered rule win per-property, but any property it does NOT set
     can still leak in from the layered vendor rule (margin-inline-start:-100%
     there, meant for a connector line) — WebKit applies the leaked margin,
     shoving this badge off-screen and collapsing the row to nothing.
     Chromium happens not to. Reset explicitly so nothing can leak through. */
  margin: 0;
  position: static;
}
.steps .step::after { content: none; } /* suppress the vendor's own icon/counter pseudo-element — this component doesn't use it */
.steps .step-primary::before { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content); }
.steps-vertical { flex-direction: column; }
@media (min-width: 1024px) {
  .lg\:steps-horizontal { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .lg\:steps-horizontal .step { flex-direction: column; text-align: center; flex: 1; }
}
.tabs-boxed { display: inline-flex; gap: 0.25rem; padding: 0.3rem; border-radius: 0.9rem; background: var(--color-base-200); }
.tabs-boxed .tab { padding: 0.4rem 0.9rem; border-radius: 0.65rem; font-size: 0.86rem; font-weight: 600; cursor: pointer; }
.tabs-boxed .tab-active, .tabs-boxed .tab.is-active { background: var(--color-base-100); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ---- quiz engine (entire interactive UI had no styles) ---- */
.quiz-progress-wrap {
  position: relative;
  margin-top: 1.25rem;
  height: 2rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
}
.quiz-progress-bar {
  height: 100%;
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-base-200));
  transition: width 0.3s ease;
}
.quiz-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--color-base-content);
}
.quiz-question { display: none; margin-top: 1.5rem; }
.quiz-question--active { display: block; }
.quiz-q-text { font-size: 1.08rem; font-weight: 600; line-height: 1.55; }
.quiz-options { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.1rem; list-style: none; padding: 0; }
.quiz-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.quiz-option:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.quiz-option[disabled] { cursor: default; transform: none; }
.quiz-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-base-200);
  border: 1px solid var(--color-base-300);
  font-size: 0.8rem;
  font-weight: 800;
}
.quiz-option-text { min-width: 0; }
.quiz-option--correct {
  border-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-base-100));
}
.quiz-option--correct .quiz-option-letter { background: var(--color-success); border-color: var(--color-success); color: var(--color-success-content); }
.quiz-option--wrong {
  border-color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-base-100));
}
.quiz-option--wrong .quiz-option-letter { background: var(--color-error); border-color: var(--color-error); color: var(--color-error-content); }
.quiz-explanation {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  font-size: 0.9rem;
  line-height: 1.6;
}
.quiz-explain-icon { flex: none; font-size: 1.05rem; }
.quiz-nav { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.quiz-next-btn, .quiz-finish-btn { border-radius: 999px; }
.quiz-results { margin-top: 1.5rem; }
.quiz-results-inner { text-align: center; padding: 1rem 0 0.5rem; }
.quiz-score-ring { position: relative; width: 9.5rem; height: 9.5rem; margin: 0 auto; }
.quiz-ring-svg { width: 100%; height: 100%; display: block; }
.quiz-ring-bg { stroke: var(--color-base-300); }
.quiz-ring-fill { stroke: var(--color-primary); stroke-linecap: round; transition: stroke-dashoffset 0.9s ease; }
.quiz-score-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 800;
}
.quiz-result-headline { margin-top: 1.1rem; font-size: 1.6rem; font-weight: 800; }
.quiz-result-sub { margin-top: 0.4rem; color: color-mix(in srgb, var(--color-base-content) 65%, transparent); }
.quiz-result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 1.25rem; }
.quiz-sidebar-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.quiz-sidebar-list { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.6rem; }
.quiz-sidebar-link {
  display: block;
  padding: 0.55rem 0.65rem;
  border-radius: 0.7rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-base-content) 88%, transparent);
  text-decoration: none;
}
.quiz-sidebar-link:hover { background: var(--color-base-200); color: var(--color-primary); }
.quiz-sidebar-meta { display: block; margin-top: 0.15rem; font-size: 0.74rem; font-weight: 500; color: color-mix(in srgb, var(--color-base-content) 55%, transparent); }
.quiz-index-score {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--color-success) 45%, transparent);
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 800;
}

/* ---- video cards (/videos hub + watch pages; old dj-* palette is dead) ---- */
.video-card {
  border-color: var(--color-base-300) !important;
  background: var(--color-base-100) !important;
}
.video-thumb-wrap { background: #0e131b; }
.video-duration-badge { background: rgba(0, 0, 0, 0.8); color: #fff; }
.video-channel-badge { color: var(--color-primary); letter-spacing: 0.06em; }
.video-title { color: var(--color-base-content); text-decoration: none; }
.video-title:hover { color: var(--color-primary); }
.video-desc { color: color-mix(in srgb, var(--color-base-content) 62%, transparent); }
.video-meta { color: color-mix(in srgb, var(--color-base-content) 50%, transparent); }
.video-play-btn { opacity: 0.85; transition: opacity 0.15s, background 0.2s; }
.video-card:hover .video-play-btn { opacity: 1; }

/* ---- article table of contents (JS-built) ---- */
.toc-widget { font-size: 0.9rem; }
.rail-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.toc-list { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.6rem; counter-reset: toc; }
.toc-item { list-style: none; }
.toc-item--h3 { padding-left: 0.9rem; }
.toc-link {
  display: block;
  padding: 0.35rem 0.55rem;
  border-left: 2px solid transparent;
  border-radius: 0 0.5rem 0.5rem 0;
  color: color-mix(in srgb, var(--color-base-content) 72%, transparent);
  text-decoration: none;
  line-height: 1.45;
}
.toc-link:hover { color: var(--color-primary); background: var(--color-base-200); }
.toc-link--active { border-left-color: var(--color-primary); color: var(--color-primary); font-weight: 700; }
.toc-mobile-wrap { margin-bottom: 1.25rem; }
.toc-mobile-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 999px;
  background: var(--color-base-100);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.toc-mobile-panel {
  margin-top: 0.6rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-100);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ---- ad frames, badges, freshness chips, small JS-injected bits ---- */
.ad-slot {
  margin: 1.25rem 0;
  padding: 0.75rem;
  border: 1px dashed var(--color-base-300);
  border-radius: 1rem;
  background: var(--color-base-200);
  text-align: center;
}
.ad-label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
}
.ad-adcash { min-height: 50px; }
.editors-pick-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, #ffd83d 22%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, #b8860b 45%, transparent);
  color: #8a6d00;
  font-size: 0.68rem;
  font-weight: 800;
}
.trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.5rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, transparent);
  color: var(--color-error);
  font-size: 0.68rem;
  font-weight: 800;
}
.section-updated {
  display: inline-flex;
  align-items: center;
  margin-left: 0.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-base-100));
  color: var(--color-success);
  font-size: 0.7rem;
  font-weight: 800;
  vertical-align: middle;
}
.pdb-item--updated { animation: dj-flash 0.7s ease; }
@keyframes dj-flash {
  0% { background: color-mix(in srgb, var(--color-primary) 16%, transparent); }
  100% { background: transparent; }
}
.search-hl { background: color-mix(in srgb, var(--color-warning) 35%, transparent); border-radius: 0.2em; padding: 0 0.1em; }
.ticker-fade-out { opacity: 0; transition: opacity 0.3s ease; }
.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--color-error);
  animation: tv-pulse 1.8s infinite;
  vertical-align: 2px;
}
/* markdown renderer extras */
.table-wrap { overflow-x: auto; }
.task-list { list-style: none; padding-left: 0.25rem; }
.task { display: flex; align-items: baseline; gap: 0.5rem; }
/* scroll-reveal (IntersectionObserver adds .aos-animate) */
[data-aos] { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
[data-aos].aos-animate { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-aos] { opacity: 1; transform: none; transition: none; }
}
/* misc leftovers */
.tvg-corner { display: block; }
.tv-like-glyph { margin-right: 0.1rem; }
.tv-tile-icon { font-size: 2.1rem; line-height: 1; }
.arc-lb-tabs { display: inline-flex; gap: 0.4rem; }
.sticky-bar-title { min-width: 0; }
.nl-sticky-close { flex: none; }
.helpful-widget .helpful-thanks { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--color-success); }
.helpful-btn--voted { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }

/* ---- eyebrow/badge pills: never clip the label ----
   Browsers can render the text larger than daisyUI's fixed pill height
   (minimum-font-size setting, zoom, OS accessibility text scaling). The
   Live TV / videos tiles survive because their pills are content-sized —
   give every .badge the same behaviour: the daisy --size becomes a floor
   and the pill grows with its text instead of letting it spill out. */
.badge {
  height: auto;
  min-height: var(--size, 1.5rem);
  padding-block: 0.1em;
  /* Side padding floor: daisy derives it from the --size/--border custom
     props — if a variable ever breaks that calc again (the 2026-07-12
     --border colour collision), or the browser inflates fonts, the em term
     keeps the rounded pill ends clear of the glyphs. */
  padding-inline: max(0.8em, calc(var(--size, 1.5rem) / 2 - var(--border, 1px)));
}

/* ---- app landing pages (/djplay, /djarcade): screenshots + version history ---- */
.app-shots {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 0.25rem 0.9rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.app-shot {
  flex: 0 0 auto;
  width: min(52vw, 232px);
  margin: 0;
  scroll-snap-align: start;
}
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-base-300);
  border-radius: 1.1rem;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}
.app-shot figcaption {
  margin-top: 0.45rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
  text-align: center;
}
.app-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.9rem 1.4rem;
  margin-top: 1.25rem;
}
.app-facts > div { min-width: 0; }
.app-facts dt {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-base-content) 50%, transparent);
}
.app-facts dd {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-base-content);
  overflow-wrap: anywhere;
}
.app-changelog { list-style: none; margin: 1rem 0 0; padding: 0; }
.app-release {
  padding: 1rem 0;
  border-top: 1px solid var(--color-base-300);
}
.app-release:first-child { border-top: 0; padding-top: 0.25rem; }
.app-release-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}
.app-release-version { font-weight: 800; font-size: 1.05rem; }
.app-release-meta {
  font-size: 0.82rem;
  color: color-mix(in srgb, var(--color-base-content) 55%, transparent);
}
.app-release-notes {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.65;
  color: color-mix(in srgb, var(--color-base-content) 78%, transparent);
}
.app-release-sha {
  margin-top: 0.3rem;
  font-size: 0.7rem;
  word-break: break-all;
  color: color-mix(in srgb, var(--color-base-content) 40%, transparent);
}

/* ---- /apps hub: QR + actions row ---- */
.app-qr-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-base-300);
}
.app-qr {
  width: 132px;
  height: 132px;
  flex: none;
  border: 1px solid var(--color-base-300);
  border-radius: 0.8rem;
}
.app-qr-side { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }