/* ===========================================================================
   gta6kick.com SIGNATURE FEATURE styles, "Live on Kick, GTA 6"
   Countdown grid (#gta6-countdown) + live streamer board (#kick-board).
   Uses the Green Static palette tokens (loaded ahead of this file by the inline
   critical CSS), with safe literal fallbacks so the feature still themes if the
   tokens are absent. Mobile-first, no horizontal scroll. WCAG AA.
   No em dashes in comments (assets are copied verbatim, not normalized).
   =========================================================================== */

/* ---- COUNTDOWN ----------------------------------------------------------- */
#gta6-countdown { margin-block: 0 24px; }
.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  max-width: 480px;
}
.cd-cell {
  background: var(--ink-700, #161618);
  border: 1px solid var(--line, #2a2a30);
  border-radius: var(--radius-md, 10px);
  padding: 14px 8px 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cd-cell::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--green, #53fc18); opacity: 0.85;
}
.cd-val {
  display: block;
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1;
  color: var(--green, #53fc18);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.cd-lab {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3, #8a8a96);
  font-weight: 600;
}
.cd-done {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800; font-size: 1.4rem; color: var(--green, #53fc18); margin: 0;
}

/* ---- LIVE STREAMER BOARD ------------------------------------------------- */
#kick-board { margin-block: 8px 0; }
.kb-head { margin-block-end: 18px; }
.kb-title {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800; font-size: clamp(1.4rem, 3vw, 1.9rem);
  letter-spacing: -0.02em; color: var(--text, #f4f4f5); margin: 0 0 8px;
}
.kb-note { font-size: 0.94rem; color: var(--text-2, #c4c4cc); margin: 0; max-width: 70ch; }
.kb-count {
  margin: 12px 0 0; font-size: 0.86rem; font-weight: 700; min-height: 1em;
  color: var(--green, #53fc18);
}
.kb-count.is-active {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(83,252,24,0.10); border: 1px solid rgba(83,252,24,0.4);
}

.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}
.kb-card {
  background: var(--ink-600, #1c1c20);
  border: 1px solid var(--line, #2a2a30);
  border-radius: var(--radius-lg, 14px);
  padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color 200ms ease, transform 200ms ease;
  min-width: 0;
}
.kb-card.is-live { border-color: rgba(255,92,92,0.4); }
.kb-card.is-saved { border-color: var(--green, #53fc18); box-shadow: var(--glow-green, 0 0 0 1px rgba(83,252,24,0.4), 0 0 28px rgba(83,252,24,0.28)); }
.kb-card:hover { transform: translateY(-2px); }

.kb-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kb-flag { font-size: 0.78rem; color: var(--text-3, #8a8a96); font-weight: 600; white-space: nowrap; }

.kb-card__name {
  font-family: var(--font-display, "Archivo", system-ui, sans-serif);
  font-weight: 800; font-size: 1.12rem; color: var(--text, #f4f4f5); margin: 0;
  letter-spacing: -0.01em; word-break: break-word;
}
.kb-card__meta { font-size: 0.82rem; color: var(--text-2, #c4c4cc); margin: 0; }

/* live pill (mirrors the skin component, redefined here so the module is
   self-contained when feature.css loads after the inline critical CSS). */
.kb-card .live-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink-500, #26262b); color: var(--text-3, #8a8a96);
  border: 1px solid var(--line-2, #3a3a42);
}
.kb-card .live-pill .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3, #8a8a96); }
.kb-card .live-pill--live { color: var(--coral, #ff5c5c); border-color: rgba(255,92,92,0.5); background: rgba(255,92,92,0.10); }
.kb-card .live-pill--live .live-dot { background: var(--coral, #ff5c5c); box-shadow: 0 0 8px var(--coral, #ff5c5c); animation: kb-pulse 1.6s ease-in-out infinite; }
@keyframes kb-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Notify checkbox */
.kb-notify {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line, #2a2a30);
  font-size: 0.84rem; color: var(--text-2, #c4c4cc); font-weight: 500;
  min-height: 32px;
}
.kb-notify input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; flex: none; margin: 0;
  border: 1.5px solid var(--line-2, #3a3a42); border-radius: 5px;
  background: var(--ink-700, #161618); cursor: pointer; position: relative;
  transition: background 130ms ease, border-color 130ms ease;
}
.kb-notify input:hover { border-color: var(--green, #53fc18); }
.kb-notify input:checked { background: var(--green, #53fc18); border-color: var(--green, #53fc18); }
.kb-notify input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px; border: solid #0e0e10; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.kb-notify input:focus-visible { outline: 3px solid var(--green, #53fc18); outline-offset: 2px; }
.kb-card.is-saved .kb-notify { color: var(--green-hi, #7dff52); }

@media (prefers-reduced-motion: reduce) {
  .kb-card .live-pill--live .live-dot { animation: none; }
}

/* extra-small screens: 2-up countdown, single-column board if very tight */
@media (max-width: 380px) {
  .cd-grid { gap: 8px; }
  .cd-cell { padding: 12px 4px 8px; }
}