/* ============================================================
   THE BOTTOM LINE — scores + headlines crawl, pinned to the
   bottom of the screen. Behaviour: js/bottomline.js
   The bar is built by the script, so if the script never runs
   (or ESPN's data is down) none of this ever shows.
   ============================================================ */
.bl{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:stretch;
  height:calc(38px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:#040605;
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(0,0,0,.45);
  font-size:.8rem;
  animation:blIn .45s ease-out both;
}
@keyframes blIn{ from{ transform:translateY(100%); } }

/* Leaves room so the footer is never hidden behind the bar. */
body.has-bl{ padding-bottom:calc(38px + env(safe-area-inset-bottom)); }

.bl__brand{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:0 14px 0 max(14px, env(safe-area-inset-left));
  background:var(--green); color:#04140B;
  font-family:var(--display); font-weight:700; font-size:.95rem; letter-spacing:.08em;
  position:relative; z-index:1;
}

.bl__viewport{
  flex:1; min-width:0; overflow:hidden; position:relative;
  /* Items fade out at the edges instead of being cut off. */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.bl__track{
  display:flex; align-items:center; height:100%;
  width:max-content;
  animation:scroll 120s linear infinite;   /* real duration set by the script from the width */
}
.bl:hover .bl__track,
.bl:focus-within .bl__track{ animation-play-state:paused; }

.bl__seg{ display:flex; align-items:center; padding-right:28px; }
.bl__tag{
  margin-right:14px; padding:3px 8px; border-radius:4px;
  background:rgba(232,185,63,.14); color:var(--gold);
  font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.08em;
  white-space:nowrap;
}
.bl__dot{
  width:4px; height:4px; margin:0 16px; border-radius:50%;
  background:var(--line); flex:none;
}

.bl__item{
  display:inline-flex; align-items:center; gap:10px;
  white-space:nowrap; color:var(--text); text-decoration:none;
}
a.bl__item:hover .bl__teams,
a.bl__news:hover{ text-decoration:underline; text-underline-offset:3px; }
a.bl__item:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:3px; }

.bl__teams{ font-weight:600; }
.bl__teams em{ font-style:normal; color:var(--dim); font-weight:500; }
.bl__teams b{ font-family:var(--display); font-size:.98rem; font-weight:700; margin-right:4px; }
.bl__lose{ color:var(--dim); }
.bl__rank{
  font-style:normal; font-size:.68rem; font-weight:600; color:var(--muted);
  margin-right:3px; vertical-align:1px;
}
.bl__when{ color:var(--muted); }
.bl__line{ color:var(--green); font-weight:600; }
.bl__status{
  font-family:var(--display); font-weight:700; font-size:.82rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.bl__status--live{ color:var(--red); }
.bl__status--live::before{
  content:""; display:inline-block; width:6px; height:6px; margin-right:6px;
  border-radius:50%; background:var(--red); vertical-align:1px;
  animation:blPulse 1.4s ease-in-out infinite;
}
@keyframes blPulse{ 50%{ opacity:.3; } }

.bl__news{ color:var(--muted); font-weight:500; }
.bl__news:hover{ color:var(--text); }

.bl__src{
  flex:none; display:flex; align-items:center; padding:0 4px 0 10px;
  color:var(--dim); font-size:.66rem; letter-spacing:.04em; white-space:nowrap;
}
.bl__close{
  flex:none; width:36px; padding:0 max(0px, env(safe-area-inset-right)) 0 0;
  background:none; border:0; color:var(--dim); font-size:1.25rem; line-height:1; cursor:pointer;
}
.bl__close:hover, .bl__close:focus-visible{ color:var(--text); }

@media (max-width:640px){
  .bl__brand{ padding:0 10px 0 max(10px, env(safe-area-inset-left)); font-size:0; gap:0; }  /* mark only */
  .bl__src{ font-size:.6rem; padding-left:8px; }
}

/* Reduced motion: no crawl. The row becomes a strip you can swipe. */
@media (prefers-reduced-motion:reduce){
  .bl{ animation:none; }
  .bl__track{ animation:none !important; }
  .bl__viewport{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .bl__status--live::before{ animation:none; }
}