/* LiveTV.eu - Twitch-pagina's (/twitch, /twitch/{login}), 2026-11-10.
   Bouwt voort op discovery.css (dc-hero, chnl-card, dcf, card-grid). */

.tw-pill-live,
.tw-pill-off {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-size: .75rem; font-weight: 800; letter-spacing: .06em; line-height: 1;
  padding: 6px 10px; border-radius: 6px; color: #fff; background: #ff2d55;
}
.tw-pill-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.tw-pill-off { background: #2a3242; color: #c9d4e6; }

.chnl-badge.tw-badge-live { background: #ff2d55; color: #fff; border-color: transparent; }
.tag.tw-tag-live { background: rgba(255, 45, 85, .14); color: #ff8fa8; border: 1px solid rgba(255, 45, 85, .35); }
.chnl-logo .tw-ini { font-size: 1rem; color: #2b1f5c; }

.dc-chips a[aria-current="true"] { border-color: #a970ff; color: #fff; }

.tw-offline {
  display: flex; flex-direction: column; gap: 4px;
  margin: 18px 0 0; padding: 14px 18px; border-radius: 12px;
  background: #121a2c; border: 1px solid #2a3550; color: #c9d4e6;
}
.tw-offline b { color: #fff; font-size: 1.05rem; }

.tw-watch { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: stretch; }
.tw-player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0d0a1a; border: 1px solid #241a45; }
.tw-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tw-chat { border-radius: 14px; overflow: hidden; background: #0e1628; border: 1px solid #1f2c47; min-height: 360px; }
.tw-chat iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.tw-watch:not(:has(.tw-chat)) { grid-template-columns: minmax(0, 860px); justify-content: center; }

.tw-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; margin-top: 22px; }
.tw-avatar {
  flex: 0 0 72px; width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  border: 3px solid #a970ff; background: #2b1f5c; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem;
}
.tw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tw-head-copy { flex: 1 1 360px; min-width: 0; }
.tw-head-copy h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tw-title { margin: 6px 0 10px; font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.tw-tags { margin: 0; }
.tw-tag { display: inline-block; padding: 6px 12px; border-radius: 999px; background: #161f36; color: #c9d4e6; font-size: .85rem; }
.tw-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.tw-stats { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tw-stats li { background: #0e1628; border: 1px solid #1f2c47; border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.tw-stats span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: #93a3bd; font-weight: 700; }
.tw-stats b { font-size: 1.3rem; }

.tw-about p { margin: 0; color: #b4c1d6; line-height: 1.7; max-width: 900px; overflow-wrap: anywhere; }
.tw-clip img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; margin-bottom: 10px; }
.tw-notice { font-size: .85rem; margin: 28px 0 0; }

@media (max-width: 900px) {
  .tw-watch { grid-template-columns: minmax(0, 1fr); }
  .tw-chat, .tw-chat iframe { min-height: 420px; }
  .tw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* live-teller op /twitch (2026-11-10) */
.tw-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; margin-right: 7px; vertical-align: 1px; animation: tw-blink 1.4s ease-in-out infinite; }
@keyframes tw-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .tw-dot { animation: none; } }