/* ===========================================================================
   gta6twitch.com · SIGNATURE FEATURE styles, "Featured Channel"
   A flat dark Twitch stream/player frame, CSS-only over the existing DOM
   (#watch-feature host -> .watch-feature__card -> .watch-countdown + .watch-check):
     * a purple top-rail panel with a LIVE strip (red dot + viewer-count chip),
     * the countdown rendered as box-art tiles (flips to a Watch Now player
       post launch),
     * the Twitch Drops checklist as a progress panel with a teal claimed state.
   feature.js is untouched. Literal-hex fallbacks sit beside every token so the
   module still reads correctly if loaded before the main stylesheet (assets are
   copied verbatim, the dash normalizer does not run on them).
   No em dashes in these comments.
   =========================================================================== */

.watch-feature, .watch-feature__card {
  background: var(--tw-panel, #18181B);
  border: 1px solid var(--tw-border, #2F2F35);
  border-top: 2px solid var(--tw-purple, #9146FF);
  border-radius: var(--radius-lg, 10px);
  box-shadow: var(--shadow-md, 0 4px 14px rgba(0,0,0,0.45));
  padding: clamp(1.4rem, 4vw, 2.2rem);
  text-align: left;
  overflow: hidden;
}
/* When feature.js mounts, the inner card carries the chrome; flatten the host. */
.watch-feature:not(:empty) {
  border: 0; border-top: 0; border-radius: 0; box-shadow: none;
  background: transparent; padding: 0;
}

/* ---- LIVE strip (red dot + label + viewer-count chip) -------------------- */
/* CSS-only over the existing DOM. The card ::before draws a red LIVE dot + an
   uppercase label; ::after pins a decorative viewer-count chip top-right. Pre
   launch the chip reads a static waiting count (purely decorative, no new JS).
   feature.js adds .watch-cd--live to the inner .watch-countdown post launch, so
   we flip the label to "LIVE NOW" with :has() (graceful: stays "LIVE IN" without
   :has support, which is fine pre-launch and on the only post-launch edge). */
.watch-feature__card { position: relative; }
.watch-feature__card::before {
  content: "LIVE IN";
  position: relative; padding-left: 16px;
  display: inline-flex; align-items: center;
  font-size: var(--text-xs, 0.8rem); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tw-text-3, #898992);
  margin-bottom: 0.85rem;
}
.watch-feature__card::before {
  background:
    radial-gradient(circle at 4px 50%, var(--tw-live, #EB0400) 0 4px, transparent 5px) left center no-repeat;
}
.watch-feature__card:has(.watch-cd--live)::before {
  content: "LIVE NOW"; color: var(--tw-live-text, #FF4D4A);
}
.watch-feature__card::after {
  content: "GTA VI \00B7 waiting room";
  position: absolute; top: clamp(1.4rem, 4vw, 2.2rem); right: clamp(1.4rem, 4vw, 2.2rem);
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--tw-raised, #1F1F23); border: 1px solid var(--tw-border, #2F2F35);
  border-radius: var(--radius-sm, 4px);
  padding: 4px 10px; font-size: var(--text-xs, 0.8rem); font-weight: 600;
  color: var(--tw-text-2, #ADADB8); font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---- COUNTDOWN ----------------------------------------------------------- */
.watch-cd__title {
  margin: 0 0 0.9rem;
  font-family: var(--font-display, "Inter", sans-serif);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.4vw + 1rem, 1.7rem);
  letter-spacing: -0.01em;
  color: var(--tw-text, #EFEFF1);
  max-width: none;
}
.watch-cd__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 1.6vw, 16px);
  max-width: 560px;
  margin: 0;
}
.watch-cd__cell {
  background: var(--tw-raised, #1F1F23);
  border: 1px solid var(--tw-border, #2F2F35);
  border-top: 2px solid var(--tw-purple, #9146FF);
  border-radius: var(--radius-md, 6px);
  padding: clamp(0.7rem, 2vw, 1.1rem) 0.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 0;
}
.watch-cd__val {
  font-family: var(--font-display, "Inter", sans-serif);
  font-weight: 800;
  font-size: clamp(1.5rem, 4.6vw, 2.6rem);
  line-height: 1;
  color: var(--tw-text, #EFEFF1);
  font-variant-numeric: tabular-nums;
}
.watch-cd__unit {
  font-size: var(--text-xs, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--tw-text-3, #898992);
}
.watch-cd__note {
  margin: 1rem 0 0;
  font-size: var(--text-small, 0.93rem);
  color: var(--tw-text-2, #ADADB8);
  max-width: 56ch;
}

/* ---- WATCH NOW (post-launch player frame) -------------------------------- */
.watch-cd--live .watch-cd__livepill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--tw-live, #EB0400); color: #fff;
  border-radius: var(--radius-sm, 4px);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 13px; margin-bottom: 0.7rem;
}
.watch-cd--live .watch-cd__livepill::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: watch-blink 1.2s ease-in-out infinite;
}
@keyframes watch-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.watch-cd__intro {
  margin: 0 0 1.2rem; max-width: 56ch;
  font-size: var(--text-small, 0.93rem); color: var(--tw-text-2, #ADADB8);
}
.watch-cd__links {
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.6rem;
}
.watch-cd__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.4rem;
  border-radius: var(--radius-md, 6px);
  font-weight: 700; text-decoration: none; border: 1px solid transparent;
  transition: transform 130ms ease, background 130ms ease, filter 130ms ease;
}
.watch-cd__btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.watch-cd__btn--twitch  { background: var(--tw-purple, #9146FF); color: #fff; }
.watch-cd__btn--twitch:hover { background: var(--tw-purple-deep, #772CE8); filter: none; }
.watch-cd__btn--kick    { background: var(--tw-panel, #18181B); color: var(--tw-text, #EFEFF1); border-color: var(--tw-border, #2F2F35); }
.watch-cd__btn--youtube { background: #CC0000; color: #fff; }

/* ---- CHECKLIST (Twitch Drops panel) -------------------------------------- */
.watch-check {
  margin-top: clamp(1.4rem, 4vw, 2.2rem);
  padding-top: clamp(1.4rem, 4vw, 2.2rem);
  border-top: 1px solid var(--tw-border, #2F2F35);
  text-align: left;
}
.watch-check__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display, "Inter", sans-serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.2vw + 0.9rem, 1.45rem);
  color: var(--tw-text, #EFEFF1);
}
.watch-check__intro {
  margin: 0 0 1.1rem; max-width: 64ch;
  font-size: var(--text-small, 0.93rem); color: var(--tw-text-2, #ADADB8);
}
.watch-check__progress {
  display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.1rem;
}
.watch-check__bar {
  flex: 1; height: 10px; border-radius: 9999px;
  background: var(--tw-inset, #0B0B0D); overflow: hidden; min-width: 0;
}
.watch-check__fill {
  display: block; height: 100%; width: 0%;
  background: var(--tw-purple, #9146FF);
  border-radius: 9999px;
  transition: width 280ms ease;
}
.watch-check__pct {
  font-family: var(--font-display, "Inter", sans-serif);
  font-weight: 700; font-size: var(--text-small, 0.93rem);
  color: var(--tw-text-2, #ADADB8); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.watch-check__list { list-style: none; margin: 0; padding: 0; max-width: none; }
.watch-check__item {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.7rem 0.85rem; margin: 0.4rem 0;
  border: 1px solid var(--tw-border, #2F2F35);
  border-radius: var(--radius-md, 6px);
  background: var(--tw-panel, #18181B);
  transition: border-color 150ms ease, background 150ms ease;
}
.watch-check__item:hover { background: var(--tw-hover, #26262C); }
.watch-check__item.is-done {
  border-color: rgba(0,199,176,0.40);
  background: var(--tw-success-soft, rgba(0,199,176,0.14));
}
.watch-check__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  accent-color: var(--tw-purple, #9146FF);
  cursor: pointer;
}
.watch-check__label {
  font-size: var(--text-body, 1.05rem); line-height: 1.4;
  color: var(--tw-text-2, #ADADB8); cursor: pointer;
}
.watch-check__item.is-done .watch-check__label {
  color: var(--tw-text-3, #898992); text-decoration: line-through;
}
.watch-check__reset {
  margin-top: 0.9rem;
  font: inherit; font-size: var(--text-small, 0.93rem); font-weight: 700;
  color: var(--tw-text-3, #898992);
  background: transparent; border: 1px solid var(--tw-border, #2F2F35);
  border-radius: var(--radius-md, 6px); padding: 0.5rem 1.2rem; cursor: pointer;
  transition: border-color 130ms ease, color 130ms ease;
}
.watch-check__reset:hover { border-color: var(--tw-purple, #9146FF); color: var(--tw-text, #EFEFF1); }
.watch-check__reset:focus-visible { outline: 3px solid var(--tw-purple-line, rgba(145,70,255,0.40)); outline-offset: 2px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 480px) {
  .watch-cd__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .watch-cd__btn { width: 100%; }
  .watch-feature__card::after { position: static; display: inline-flex; margin-bottom: 0.6rem; }
}