/* ScoreTrackLive game page tabs: Box Score / Play-by-Play / Shot Chart (same look as the box score) */
.stl-gt { margin: 24px 0 8px; clear: both; font: 13px/1.4 helvetica, arial, sans-serif; color: #222; }
.stl-gt-nav { display: flex; gap: 4px; border-bottom: 3px solid #333; margin: 0 0 4px; }
.stl-gt-nav button { font: 700 13px/1 'Oswald', helvetica, arial, sans-serif; letter-spacing: .05em; text-transform: uppercase;
  background: #eee; color: #333; border: 0; border-radius: 3px 3px 0 0; padding: 11px 14px; cursor: pointer; flex: 0 1 auto; }
.stl-gt-nav button[aria-selected="true"] { background: #333; color: #fff; }
.stl-gt .stl-box { margin-top: 12px; }
.stl-gt-pane[hidden] { display: none; }
#content-area .stl-gt h3.stl-sub, .stl-gt h3.stl-sub { font: 700 17px/1.2 'Oswald', helvetica, arial, sans-serif; text-transform: uppercase; margin: 14px 0 6px; }
.stl-gt .stl-note { color: #666; font-style: italic; margin: 6px 0; }

/* Filters */
.stl-ft { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 8px; }
.stl-ft select { font: 14px helvetica, arial, sans-serif; padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; background: #fff; color: #222; max-width: 100%; }
.stl-ft label { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.stl-seg { display: inline-flex; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; }
.stl-seg button { background: #fff; border: 0; border-right: 1px solid #ccc; padding: 7px 10px; font: 700 12px/1 helvetica, arial, sans-serif; cursor: pointer; color: #333; }
.stl-seg button:last-child { border-right: 0; }
.stl-seg button.on { background: #333; color: #fff; }

/* Game flow */
.stl-flow-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; margin: 0 0 4px; }
.stl-flow-wrap { position: relative; }
.stl-flow-svg { display: block; width: 100%; height: auto; max-height: 220px; background: #fafafa; border: 1px solid #e2e2e2; border-radius: 4px; touch-action: pan-y; }
.stl-flow-svg .qline { stroke: #ddd; stroke-width: 1; }
.stl-flow-svg .zero { stroke: #999; stroke-width: 1; }
.stl-flow-svg .lead { fill: none; stroke: #333; stroke-width: 2; }
.stl-flow-svg .cur { stroke: #333; stroke-width: 1; stroke-dasharray: 3 3; }
.stl-flow-svg text { font: 11px helvetica, arial, sans-serif; }
.stl-flow-svg .qlab { fill: #777; text-anchor: middle; }
.stl-flow-svg .ax { fill: #999; text-anchor: end; }
.stl-flow-svg .side { font-weight: 700; }
.stl-flow-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); background: #222; color: #fff; padding: 4px 8px; border-radius: 3px;
  font-size: 12px; white-space: nowrap; pointer-events: none; }

/* Play list */
.stl-pbp { border: 1px solid #e2e2e2; border-radius: 4px; overflow: hidden; }
.stl-pbp-head, .stl-pbp-row { display: grid; grid-template-columns: 48px 1fr 46px 46px; align-items: center; }
.stl-pbp-head { background: #333; color: #fff; font: 700 11px/1 helvetica, arial, sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.stl-pbp-head span { padding: 8px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-pbp-row { border-top: 1px solid #eee; font-variant-numeric: tabular-nums; }
.stl-pbp-row:nth-child(even) { background: #fafafa; }
.stl-pbp-row > span { padding: 7px 6px; }
.stl-pbp-row .clk { color: #777; }
.stl-pbp-row .ds { min-width: 0; }
.stl-pbp .ds i, .stl-pbp-head i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: 0; }
.stl-pbp-row .ds a { font-weight: 700; text-decoration: none; }
.stl-pbp .sc { text-align: center; }
.stl-pbp-row .sc { color: #777; }
.stl-pbp-row.sc-play .ds { font-weight: 700; }
.stl-pbp-row .sc.up { color: #222; font-weight: 700; }
.stl-pbp-row.miss .ds { color: #666; }
.stl-pbp-row.flash { animation: stl-flash 2.4s ease-out; }
@keyframes stl-flash { 0%, 40% { background: #ffe9a8; } 100% { background: transparent; } }
.stl-pbp-q { background: #eee; font: 700 13px/1.2 'Oswald', helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing: .04em; padding: 8px; border-top: 1px solid #ddd; }

/* Shot chart */
.stl-sc-sum { font-size: 14px; margin: 0 0 6px; }
.stl-sc-wrap { position: relative; }
.stl-sc-court { display: block; width: 100%; height: auto; background: #f4e3c3; border-radius: 4px; }
.stl-sc-court .ln { fill: none; stroke: #8a6a3a; stroke-width: 3; }
.stl-sc-court .tm { font: 700 64px 'Oswald', helvetica, arial, sans-serif; fill: #8a6a3a; opacity: .14; text-anchor: middle; text-transform: uppercase; pointer-events: none; }
.stl-sc-court .mk { fill: #1f9d55; stroke: #fff; stroke-width: 2.5; }
.stl-sc-court .ms { fill: none; stroke: #c62828; stroke-width: 4.5; stroke-linecap: round; }
.stl-sc-court .hit { fill: transparent; cursor: pointer; outline: none; }
.stl-sc-court .shot:hover .mk, .stl-sc-court .hit:focus ~ .mk { stroke: #222; }
.stl-sc-tip { position: absolute; z-index: 5; background: #222; color: #fff; padding: 8px 10px; border-radius: 4px; font-size: 13px; line-height: 1.45;
  max-width: 260px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.stl-sc-tip a { color: #ffb74d; font-weight: 700; text-decoration: none; }
.stl-sc-legend { text-align: center; font-size: 12px; color: #555; margin: 6px 0 0; }
.stl-sc-legend .mk { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #1f9d55; vertical-align: -1px; }
.stl-sc-legend .ms { color: #c62828; font-weight: 700; margin-left: 8px; }

@media (max-width: 600px) {
  .stl-gt-nav button { padding: 10px 9px; font-size: 12px; flex: 1 1 0; }
  .stl-pbp-head, .stl-pbp-row { grid-template-columns: 46px 1fr 34px 34px; font-size: 12px; }
  .stl-pbp-head .sc b { display: none; }
  .stl-pbp-head .sc i { margin: 0; width: 11px; height: 11px; }
  .stl-ft select { flex: 1 1 45%; }
}