/* NBA edges on Polymarket: game night. The run is the hero, the play is drawn on a half court, the live board
   sits in a broadcast frame, the backtest is an arena scoreboard and the story is told by quarter. */

.post[data-accent="nba"] h1 { letter-spacing: -0.03em; }
@media (min-width: 640px) {
  .post[data-accent="nba"] h1 { font-size: 2.75rem; line-height: 1.1; }
}

/* A small basketball in front of each section title. */
.post[data-accent="nba"] .prose h2::before {
  width: 0.62em;
  height: 0.62em;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 45%, var(--page) 45% 55%, transparent 55%),
    linear-gradient(transparent 45%, var(--page) 45% 55%, transparent 55%),
    var(--accent-2);
  vertical-align: 0.04em;
}

/* The run: the hero chart, as wide as the column. Its labels shrink on wide screens, where the chart grows. */
.post[data-accent="nba"] .visual { margin-top: 2.5rem; }
.post[data-accent="nba"] .visual svg { max-width: none; overflow: visible; }
.post[data-accent="nba"] .visual .run-big { font: 600 40px var(--sans); letter-spacing: -0.05em; fill: var(--text); }
.post[data-accent="nba"] .visual .run-word { font-size: 18px; font-weight: 500; letter-spacing: 0; fill: var(--accent-2); }
.post[data-accent="nba"] .visual .run-note { font: 400 12.5px var(--mono); fill: var(--gray-600); }
.post[data-accent="nba"] .visual .run-from { font: 400 13px var(--mono); fill: var(--gray-600); }
.post[data-accent="nba"] .visual .run-to { font: 600 22px var(--sans); letter-spacing: -0.03em; fill: var(--accent-2); }
.post[data-accent="nba"] .visual .area { opacity: 0.16; }
.post[data-accent="nba"] .visual .line { stroke-width: 2.5; }
.post[data-accent="nba"] .visual .chips rect { fill: var(--accent-2); stroke: none; }
.post[data-accent="nba"] .visual .chips text { font: 400 12.5px var(--mono); fill: var(--page); }
@media (min-width: 640px) {
  .post[data-accent="nba"] .visual .run-note { font-size: 8.5px; }
  .post[data-accent="nba"] .visual .run-from { font-size: 9px; }
  .post[data-accent="nba"] .visual .run-to { font-size: 19px; }
  .post[data-accent="nba"] .visual .chips text { font-size: 10px; }
}

/* The play: the decision drawn on a half court, the market rule beside it on wide screens. */
.post[data-accent="nba"] .play { margin: 2rem 0 2.5rem; }
.post[data-accent="nba"] .play .diagram { max-width: 24rem; margin: 0 auto; }
.post[data-accent="nba"] .play blockquote { margin: 1.75rem 0 0; padding: 0; border: 0; font-size: 1.375rem; line-height: 1.4; letter-spacing: -0.01em; font-weight: 500; color: var(--text); }
.post[data-accent="nba"] .play blockquote em { font-style: normal; color: var(--accent-2); }
@media (min-width: 640px) {
  .post[data-accent="nba"] .play { display: grid; grid-template-columns: minmax(0, 23rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
  .post[data-accent="nba"] .play .diagram { margin: 0; }
  .post[data-accent="nba"] .play blockquote { margin: 0; font-size: 1.5rem; }
}
.post[data-accent="nba"] .diagram .court { color: var(--line); stroke-width: 1.2; }
.post[data-accent="nba"] .diagram .floor { fill: color-mix(in srgb, var(--accent-2) 4%, var(--page)); }
.post[data-accent="nba"] .diagram .paint { fill: color-mix(in srgb, var(--accent-2) 10%, var(--page)); }
.post[data-accent="nba"] .diagram .rim { color: var(--accent-2); stroke-width: 2.5; }
.post[data-accent="nba"] .diagram .route { stroke-width: 2; stroke-linejoin: round; }
.post[data-accent="nba"] .diagram .tip { fill: currentColor; }
.post[data-accent="nba"] .diagram .mine { color: var(--accent-2); }
.post[data-accent="nba"] .diagram .market, .post[data-accent="nba"] .diagram .take { color: var(--accent); }
.post[data-accent="nba"] .diagram .skip, .post[data-accent="nba"] .diagram .spot-skip { color: var(--gray-500); }
.post[data-accent="nba"] .diagram .spot-skip { stroke-width: 1.5; }
.post[data-accent="nba"] .diagram .player { stroke-width: 3; fill: var(--page); }
.post[data-accent="nba"] .diagram .ball circle { fill: var(--accent-2); }
.post[data-accent="nba"] .diagram .ball .seam { stroke: #111214; stroke-width: 1.1; }
.post[data-accent="nba"] .diagram .table { color: var(--accent); fill: var(--accent-soft); stroke-width: 1.5; }
.post[data-accent="nba"] .diagram text { font: 400 13px var(--mono); fill: var(--text); paint-order: stroke; stroke: var(--page); stroke-width: 5px; stroke-linejoin: round; }
.post[data-accent="nba"] .diagram .cond.yes { fill: var(--accent); }
.post[data-accent="nba"] .diagram .cond.no, .post[data-accent="nba"] .diagram .lab.no { fill: var(--gray-500); }

/* The live board, framed like a broadcast: a two-colour bezel and a lower third for the caption. */
.post[data-accent="nba"] .shot { max-width: 34rem; margin: 2.5rem auto 3rem; padding: 0.4rem; border-radius: 1rem; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.post[data-accent="nba"] .shot img { border: 0; border-radius: 0.7rem; }
.post[data-accent="nba"] .shot figcaption {
  position: relative;
  margin: -1.1rem 0.9rem 0;
  padding: 0.55rem 0.8rem 0.55rem 0.95rem;
  border-left: 0.4rem solid #ff9a4d;
  border-radius: 0.2rem;
  background: #2e5cff;
  color: #fff;
  font: 400 0.75rem/1.4 var(--mono);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.35);
}

/* The backtest: an arena scoreboard. It stays dark in both themes, so its colours are its own. */
.post[data-accent="nba"] .board {
  position: relative;
  margin: 1.75rem 0 2.25rem;
  padding: 1rem 1.25rem 0.95rem;
  border-radius: 0.9rem;
  background: #0b0d12;
  color: #d4d6da;
  border: 4px solid #15181f;
  box-shadow: inset 0 0 0 1px #2a2e38, 0 14px 36px -14px rgb(0 0 0 / 0.45);
}
.post[data-accent="nba"] .board::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle, rgb(255 255 255 / 0.07) 0.8px, transparent 1.3px) 0 0 / 5px 5px;
  pointer-events: none;
}
.post[data-accent="nba"] .board table { position: relative; width: 100%; margin: 0; font-size: 1rem; border-collapse: collapse; }
.post[data-accent="nba"] .board caption { padding: 0 0 0.85rem; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-align: left; text-transform: uppercase; color: #9a9da4; }
.post[data-accent="nba"] .board caption i { font-style: normal; color: #ff9a4d; }
.post[data-accent="nba"] .board th, .post[data-accent="nba"] .board td { padding: 0.3rem 0; border: 0; }
.post[data-accent="nba"] .board thead th { padding-bottom: 0.55rem; border-bottom: 1px solid #2a2e38; font: 400 0.6875rem/1.3 var(--mono); letter-spacing: 0.1em; text-align: right; text-transform: uppercase; color: #9a9da4; }
.post[data-accent="nba"] .board thead th:first-child, .post[data-accent="nba"] .board tbody th { text-align: left; }
.post[data-accent="nba"] .board tbody tr:first-child > * { padding-top: 0.7rem; }
.post[data-accent="nba"] .board tbody th { font: 400 0.9375rem/1 var(--mono); white-space: nowrap; color: #ececee; }
.post[data-accent="nba"] .board td { font: 400 2.75rem/1.1 var(--mono); letter-spacing: -0.05em; text-align: right; font-variant-numeric: tabular-nums; }
.post[data-accent="nba"] .board .won { color: #ff9a4d; text-shadow: 0 0 22px rgb(255 154 77 / 0.45); }
.post[data-accent="nba"] .board .ret { color: #8ea6ff; text-shadow: 0 0 22px rgb(142 166 255 / 0.45); }
.post[data-accent="nba"] .board-foot { position: relative; display: flex; flex-wrap: wrap; gap: 0.3rem 1.75rem; margin: 0.8rem 0 0; padding-top: 0.75rem; border-top: 1px solid #2a2e38; font: 400 0.75rem/1.5 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: #b8bbc1; }
.post[data-accent="nba"] .board-foot b { font-weight: 400; color: #ececee; }
@media (max-width: 639px) {
  .post[data-accent="nba"] .board { padding: 0.9rem 1rem 0.85rem; }
  .post[data-accent="nba"] .board td { font-size: 2rem; }
  .post[data-accent="nba"] .board tbody th { font-size: 0.8125rem; }
}

/* How the test keeps score: a referee's stripes down the side. */
.post[data-accent="nba"] .calls { position: relative; list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.6rem; font-size: 1.0625rem; line-height: 1.55; }
.post[data-accent="nba"] .calls::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 0.4rem;
  border-radius: 0.2rem;
  background: repeating-linear-gradient(180deg, var(--text) 0 0.6rem, transparent 0.6rem 1.2rem);
  box-shadow: 0 0 0 1px var(--line);
}
.post[data-accent="nba"] .calls li { margin: 0 0 0.85em; }
.post[data-accent="nba"] .calls li:last-child { margin-bottom: 0; }
.post[data-accent="nba"] .calls b { font-weight: 600; color: var(--text); }

/* The story by quarter: a play-by-play with the period, the date and what happened. */
.post[data-accent="nba"] .quarters { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.post[data-accent="nba"] .quarters li { display: grid; grid-template-columns: 3.5rem 9rem minmax(0, 1fr); gap: 0 1rem; align-items: baseline; margin: 0; padding: 1rem 0 1.05rem; border-bottom: 1px solid var(--line); }
.post[data-accent="nba"] .quarters .q { font: 400 1.75rem/1 var(--mono); letter-spacing: -0.04em; color: var(--accent); }
.post[data-accent="nba"] .quarters li:nth-child(even) .q { color: var(--accent-2); }
.post[data-accent="nba"] .quarters time { font: 400 0.8125rem/1.5 var(--mono); color: var(--gray-500); }
.post[data-accent="nba"] .quarters p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
@media (max-width: 639px) {
  .post[data-accent="nba"] .quarters li { grid-template-columns: 3rem minmax(0, 1fr); }
  .post[data-accent="nba"] .quarters .q { grid-row: span 2; }
  .post[data-accent="nba"] .quarters p { grid-column: 2; margin-top: 0.3rem; }
}

/* Motion: the run climbs once on load, and the play draws itself as the court scrolls into view. */
@media (prefers-reduced-motion: no-preference) {
  .post[data-accent="nba"] .visual .line { stroke-dasharray: 1; animation: nba-draw 1.4s linear both; }
  .post[data-accent="nba"] .visual .area { animation: nba-fade 1.6s ease-out both; }
  .post[data-accent="nba"] .visual .chips > g { animation: nba-chip 0.35s ease-out var(--d) both; }
  .post[data-accent="nba"] .visual .ball { transform-box: fill-box; transform-origin: center; animation: nba-pop 0.45s cubic-bezier(0.3, 1.6, 0.6, 1) 1.35s both; }
  @supports (animation-timeline: view()) {
    .post[data-accent="nba"] .play { view-timeline-name: --nba-court; }
    .post[data-accent="nba"] .play .route.take { stroke-dasharray: 1; animation: nba-draw linear both; animation-timeline: --nba-court; animation-range: entry 40% contain 10%; }
    .post[data-accent="nba"] .play :is(.route.mine, .route.market, .route.skip, .tip, .spot-skip, .ball) { animation: nba-fade linear both; animation-timeline: --nba-court; animation-range: entry 20% entry 90%; }
  }
}
@keyframes nba-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes nba-fade { from { opacity: 0; } }
@keyframes nba-chip { from { opacity: 0.2; transform: translateY(5px); } }
@keyframes nba-pop { from { opacity: 0; transform: scale(0.2); } }