/* The Tavern (tavern.html, tavern.js): a bar with a wall of TVs, each one
   scrolling a live quest. Builds on herald.css and quest.css. */
.tv-room {
  --wood-1: #3a2313; --wood-2: #4a2f19; --neon: #ff9a3c; --crt: #5fe3ff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  position: relative; padding: 26px 22px 30px; border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 170, 80, 0.18), transparent 60%),
    repeating-linear-gradient(90deg, var(--wood-1) 0 46px, #2e1b0e 46px 48px, var(--wood-2) 48px 94px, #2e1b0e 94px 96px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.75);
}
.tv-sign { text-align: center; font-family: "Impact", "Arial Black", sans-serif; font-size: clamp(2.4rem, 7vw, 4.4rem); letter-spacing: 0.12em; color: #fff4e0; text-shadow: 0 0 6px #fff, 0 0 14px var(--neon), 0 0 30px var(--neon), 0 0 60px #ff5a1f; animation: tv-flicker 6s infinite; margin: 0 0 6px; }
.tv-sign-small { font-size: 0.45em; vertical-align: 0.6em; letter-spacing: 0.2em; color: #ffd76a; text-shadow: 0 0 10px #ffd76a; }
@keyframes tv-flicker { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: 0.55; } }
.tv-intro { max-width: 72ch; margin: 0 auto 22px; text-align: center; color: #e8d9c0; font-size: 0.92rem; line-height: 1.55; }
.tv-intro a { color: #ffd76a; }

/* The wall of screens */
.tv-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 26px 20px; }
.tv { display: block; position: relative; text-decoration: none; color: inherit; }
.tv::before { content: ""; position: absolute; left: 50%; top: -14px; width: 46px; height: 14px; transform: translateX(-50%); background: linear-gradient(#2a2a2a, #111); border-radius: 3px 3px 0 0; }
.tv-screen { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px / 14px; background: #04090f; border: 10px solid #1c1c1f; box-shadow: 0 0 0 2px #333, 0 12px 24px rgba(0, 0, 0, 0.6), inset 0 0 40px rgba(95, 227, 255, 0.12); }
.tv:hover .tv-screen, .tv:focus-visible .tv-screen { box-shadow: 0 0 0 2px #ffd76a, 0 0 26px rgba(255, 215, 106, 0.45), inset 0 0 40px rgba(95, 227, 255, 0.2); }
.tv-screen::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.65)); }
.tv-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: saturate(1.15); }
.tv-scroll { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: linear-gradient(rgba(4, 9, 15, 0.25), rgba(4, 9, 15, 0.82) 40%); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 88%, transparent); }
.tv-text { padding: 0 14px; font-size: 0.8rem; line-height: 1.5; color: #e9f7ff; text-shadow: 0 0 6px rgba(95, 227, 255, 0.45), 0 1px 0 #000; will-change: transform; }
.tv-text p { margin: 0 0 9px; }
.tv-text .tv-act { color: #ffd76a; font-family: var(--mono); font-size: 0.72rem; }
.tv-ch, .tv-onair, .tv-live { position: absolute; z-index: 4; top: 7px; font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; }
.tv-ch { left: 8px; color: #b7ff9f; background: rgba(0, 0, 0, 0.6); text-shadow: 0 0 6px #6bff4a; }
.tv-onair, .tv-live { right: 8px; color: #fff; background: #d8261c; box-shadow: 0 0 10px rgba(216, 38, 28, 0.8); animation: qp-pulse 1.6s ease-in-out infinite; }
.tv-onair.is-idle, .tv-live.is-idle { background: #555; box-shadow: none; animation: none; }
.tv-label { margin-top: 8px; text-align: center; font-size: 0.82rem; color: #f3e6cf; text-shadow: 0 1px 0 #000; }
.tv-label strong { display: block; color: #fff; font-size: 0.9rem; }
/* Channels with nothing on: static */
.tv-static { position: absolute; inset: 0; z-index: 1; background:
  repeating-radial-gradient(circle at 17% 32%, #fff 0 0.6px, transparent 0.6px 2.6px),
  repeating-radial-gradient(circle at 73% 61%, #888 0 0.8px, transparent 0.8px 3.1px),
  repeating-radial-gradient(circle at 41% 83%, #ccc 0 0.5px, transparent 0.5px 2.2px), #2a2a2a;
  opacity: 0.55; animation: tv-snow 0.25s steps(4) infinite; }
@keyframes tv-snow { 0% { background-position: 0 0, 0 0, 0 0; } 25% { background-position: 5px 9px, -7px 3px, 3px -6px; } 50% { background-position: -4px 2px, 6px -8px, -9px 4px; } 75% { background-position: 8px -5px, -3px 7px, 6px 9px; } }
.tv-offair { position: absolute; inset: auto 10px 12px; z-index: 2; text-align: center; font-family: var(--mono); font-size: 0.72rem; color: #fff; background: rgba(0, 0, 0, 0.65); padding: 6px 8px; border-radius: 4px; }

/* The bar counter with a news ticker */
.tv-counter { display: flex; align-items: center; gap: 12px; margin: 30px -22px 0; padding: 14px 18px; background: linear-gradient(#6b3f1f, #4a2a12 45%, #2e190a); border-top: 3px solid #8a5a2e; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.5); }
.tv-mugs { font-size: 1.6rem; flex: none; }
.tv-ticker { flex: 1; overflow: hidden; white-space: nowrap; background: #0b0b0b; border: 2px solid #222; border-radius: 4px; padding: 5px 0; }
.tv-ticker p { display: inline-block; margin: 0; padding-left: 12px; font-family: var(--mono); font-size: 0.8rem; color: #ffb347; text-shadow: 0 0 6px rgba(255, 179, 71, 0.6); animation: tv-ticker 60s linear infinite; max-width: none; }
@keyframes tv-ticker { to { transform: translateX(-50%); } }
.tv-status { margin: 12px 0 0; text-align: center; color: #d9c7a8; font-size: 0.85rem; max-width: none; }

/* Watching one quest: the big TV */
.tv-watch { max-width: 860px; margin: 0 auto 10px; }
.tv-watch > p a { color: #ffd76a; }
.tv-big { margin: 18px auto 14px; max-width: 640px; }
.tv-big .tv-screen { aspect-ratio: 16 / 9; }
.tv-watch-head h2 { margin: 0; color: #fff; text-align: center; }
.tv-meta { margin: 4px 0 12px; text-align: center; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: #ffd76a; max-width: none; }
.tv-log.ak-log { max-height: none; padding: 12px; border-radius: 8px; border: 1px solid rgba(95, 227, 255, 0.28); background: rgba(13, 20, 30, 0.92); }
.tv-foot { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; color: #d9c7a8; }
.tv-foot .herald-clear { margin-left: 0; }
.tv-note { max-width: 820px; margin: 18px auto 0; color: #cdbb9c; }
@media (max-width: 560px) {
  .tv-room { padding: 18px 12px 22px; }
  .tv-counter { margin: 24px -12px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tv-sign, .tv-static, .tv-onair, .tv-live, .tv-ticker p { animation: none; }
  .tv-ticker p { padding-left: 0; white-space: normal; }
  .tv-scroll { overflow-y: auto; }
}