/* The match centre's live view (components/liveView.js): a compact
   night-theme panel at the top of the Overview tab. */
.lv {
  display: grid;
  /* minmax(0, 1fr): a long play line must wrap, never widen the panel. */
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 10px;
  margin-bottom: var(--s-4, 16px);
  padding: 12px;
  border: 1px solid rgba(160, 210, 255, .16);
  border-radius: 18px;
  background: linear-gradient(170deg, #0C2748, #071B33);
  color: #EFF5FF;
  box-shadow: 0 16px 36px rgba(3, 16, 32, .28);
}
.lv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
.lv-title { font-family: var(--font-display, "Sora", system-ui, sans-serif); font-weight: 700; font-size: .95rem; }
.lv-mode {
  padding: 2px 9px;
  border-radius: 99px;
  font-size: .72rem;
  font-weight: 700;
  color: #B4C9E4;
  background: rgba(247, 250, 255, .08);
}
.lv-mode.is-live { color: #FF6B6B; background: rgba(255, 77, 77, .14); }
.lv-mode.is-live::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-inline-end: 6px;
  vertical-align: 1px;
  border-radius: 50%;
  background: #FF4D4D;
  animation: lv-pulse 1.6s ease-out infinite;
}
@keyframes lv-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 77, .6); } 70% { box-shadow: 0 0 0 6px rgba(255, 77, 77, 0); } 100% { box-shadow: none; } }
.lv-size {
  margin-inline-start: auto;
  padding: 5px 12px;
  border: 1px solid rgba(160, 210, 255, .2);
  border-radius: 9px;
  background: rgba(247, 250, 255, .05);
  color: #EFF5FF;
  font: 600 .78rem var(--font-body, "Inter", system-ui, sans-serif);
  cursor: pointer;
}
.lv-size:hover { background: rgba(247, 250, 255, .12); }
.lv-size:focus-visible { outline: 2px solid #7FC4FF; outline-offset: 2px; }
.lv-stage { display: grid; place-items: center; min-height: 60px; min-width: 0; }
.lv-stage canvas { display: block; max-width: 100%; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(160, 210, 255, .12); }
.lv[data-state="loading"] .lv-stage { min-height: 200px; }
/* What just happened: a headline, the full play line, then down, spot,
   clock and score. Each new headline fades up rather than snapping in. */
.lv-feed { display: grid; gap: 4px; min-width: 0; padding: 2px 2px 0; }
.lv-feed.is-fresh .lv-now, .lv-feed.is-fresh .lv-detail { animation: lv-in .42s cubic-bezier(.2, .7, .2, 1); }
@keyframes lv-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.lv-now {
  margin: 0;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: .98rem;
  font-weight: 700;
  color: #F4F8FF;
  overflow-wrap: anywhere;
}
.lv-detail {
  margin: 0;
  font-size: .8rem;
  line-height: 1.45;
  color: #A9BDD8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lv-detail:empty { display: none; }
.lv-meta { margin: 0; font-size: .76rem; font-weight: 600; color: #7F98B8; font-variant-numeric: tabular-nums; }
.lv[data-state="none"] { padding: 14px 16px; }
.lv-none { margin: 0; font-size: .88rem; font-weight: 600; color: #93A9C6; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .lv-mode.is-live::before, .lv-feed.is-fresh .lv-now, .lv-feed.is-fresh .lv-detail { animation: none; }
}

/* Words beside the colours: the attack state, and a key naming each side. */
/* The attack state, as a chip in the header beside the colour on the field. */
.lv-state {
  margin: 0;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: .74rem;
  font-weight: 700;
  color: #DCEBFF;
  background: rgba(127, 196, 255, .12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.lv-state[data-level="2"] { color: #FFE1E4; background: rgba(255, 77, 77, .2); }
.lv-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; font-size: .78rem; color: #93A9C6; }
.lv-team { display: inline-flex; align-items: center; gap: 6px; color: #EFF5FF; font-weight: 600; }
.lv-team i { width: 10px; height: 10px; border-radius: 50%; }
.lv-team--home i { background: rgb(255, 90, 105); }
.lv-team--away i { background: rgb(216, 236, 255); }
.lv-guide { flex-basis: 100%; }

/* What the view knows right now: a recap, waiting on the feed, or offline. */
.lv-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  max-width: 100%;
  margin: 0;
  padding: 5px 12px;
  border-radius: 99px;
  font-size: .76rem;
  font-weight: 600;
  color: #B4C9E4;
  background: rgba(247, 250, 255, .06);
}
.lv-status[hidden] { display: none; }
.lv-status::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.lv-status[data-kind="wait"]::before { animation: lv-breathe 2.4s ease-in-out infinite; }
.lv-status[data-kind="recap"] { color: #FFD27A; background: rgba(255, 210, 122, .1); }
.lv-status[data-kind="off"] { color: #FF8A8A; background: rgba(255, 77, 77, .12); }
@keyframes lv-breathe { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .lv-status::before { animation: none; } }