/*
 * Snap Decision — Gameday visual language (6.0)
 * Football in the data: field-grid background, end-zone bands, yard-line charts,
 * first-down chains loader, flag-on-the-play errors. All CSS-drawn — no images,
 * no NFL team marks. Spec: specs/snap-decision-6.0-vault-ask-snap-dashboard.md §I
 */

/* ── The field: faint yard lines + hash-mark rows over the site background ── */
.gd-field {
  background-color: var(--color-bg, #000B18);
  background-image:
    /* sideline glow */
    radial-gradient(900px 300px at 50% -80px, rgba(1, 119, 251, 0.10), transparent 70%),
    /* yard lines (heavier every 5th handled by spacing) */
    repeating-linear-gradient(90deg,
      transparent 0, transparent 119px,
      rgba(231, 236, 242, 0.055) 119px, rgba(231, 236, 242, 0.055) 120px),
    /* hash-mark rows */
    repeating-linear-gradient(0deg,
      transparent 0, transparent 39px,
      rgba(231, 236, 242, 0.028) 39px, rgba(231, 236, 242, 0.028) 40px);
}

/* End-zone band for section headers */
.gd-endzone {
  background:
    repeating-linear-gradient(-45deg,
      rgba(1, 119, 251, 0.10) 0, rgba(1, 119, 251, 0.10) 10px,
      rgba(1, 119, 251, 0.045) 10px, rgba(1, 119, 251, 0.045) 20px);
  border-top: 1px solid rgba(1, 119, 251, 0.35);
  border-bottom: 1px solid rgba(1, 119, 251, 0.35);
}

/* ── First-down chains loader ─────────────────────────────── */
.gd-chains-wrap { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 22px 0; }
.gd-chains {
  width: min(320px, 80%); height: 12px; position: relative; overflow: hidden;
  border: 1.5px solid var(--color-border, rgba(1,119,251,.3)); border-radius: 999px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0, transparent 29px,
      rgba(231,236,242,.12) 29px, rgba(231,236,242,.12) 31px);
}
.gd-chains::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -35%; width: 35%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--color-blue, #0177FB), var(--color-visor, #46BEFF));
  animation: gd-drive 1.5s ease-in-out infinite;
}
@keyframes gd-drive { to { left: 100%; } }
.gd-chains-label {
  font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--color-muted, #98A2AE); text-transform: uppercase;
}

/* ── Flag on the play (errors) ────────────────────────────── */
.gd-flag {
  background: rgba(249, 123, 0, 0.08);
  border: 1px solid rgba(249, 123, 0, 0.4);
  border-left: 4px solid var(--color-orange, #F97B00);
  border-radius: 8px; padding: 12px 16px; margin: 12px 0;
  font-size: 0.85rem; line-height: 1.55; color: var(--color-text, #E7ECF2);
}
.gd-flag b {
  display: block; font-family: 'Orbitron', sans-serif; font-size: 0.66rem;
  letter-spacing: 0.14em; color: var(--color-orange, #F97B00); margin-bottom: 4px;
}

/* ── Play-diagram ornament (X's & O's, dashed route) ──────── */
.gd-xo { position: relative; }
.gd-xo > .gd-xo-art {
  position: absolute; top: 10px; right: 12px; width: 92px; opacity: 0.35;
  pointer-events: none;
}
@media (max-width: 640px) { .gd-xo > .gd-xo-art { display: none; } }

/* ── Yard-line charts / stat tables ───────────────────────── */
.gd-chart-note {
  font-size: 0.68rem; color: var(--color-muted, #98A2AE); margin-top: 6px;
}
.gd-stat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.gd-stat-table th {
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem; letter-spacing: 0.1em;
  color: var(--color-muted, #98A2AE); text-transform: uppercase; text-align: right;
  padding: 8px 10px; border-bottom: 1px solid var(--color-border, rgba(1,119,251,.2));
  cursor: pointer; white-space: nowrap;
}
.gd-stat-table th:first-child, .gd-stat-table td:first-child { text-align: left; }
.gd-stat-table td {
  font-size: 0.82rem; padding: 7px 10px; text-align: right;
  border-bottom: 1px solid rgba(231, 236, 242, 0.06); color: var(--color-text, #E7ECF2);
}
.gd-stat-table tbody tr:nth-child(odd) { background: rgba(231, 236, 242, 0.02); }
.gd-stat-table tbody tr:hover { background: rgba(1, 119, 251, 0.08); }

/* ── Scoring pill / attribution ───────────────────────────── */
.gd-scoring-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Orbitron', sans-serif; font-size: 0.6rem; letter-spacing: 0.1em;
  border: 1px solid rgba(70, 190, 255, 0.4); color: var(--color-visor, #46BEFF);
  border-radius: 999px; padding: 4px 12px; text-transform: uppercase;
}
.gd-attrib { font-size: 0.68rem; color: var(--color-muted, #98A2AE); margin-top: 18px; }
.gd-attrib a { color: var(--color-visor, #46BEFF); }

/* ── Tabs (football-named sections) ───────────────────────── */
.gd-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.gd-tab {
  font-family: 'Orbitron', sans-serif; font-size: 0.62rem; letter-spacing: 0.1em;
  padding: 10px 16px; border-radius: 8px; cursor: pointer; text-transform: uppercase;
  border: 1px solid var(--color-border, rgba(1,119,251,.25));
  background: transparent; color: var(--color-muted, #98A2AE);
}
.gd-tab.on {
  background: var(--color-blue, #0177FB); border-color: var(--color-blue, #0177FB);
  color: #fff; box-shadow: 0 6px 20px rgba(1, 119, 251, 0.35);
}

/* ── On-the-clock highlight (draft assistant) ─────────────── */
.gd-onclock {
  animation: gd-clock 1.2s ease-in-out infinite alternate;
  border-color: var(--color-orange, #F97B00) !important;
}
@keyframes gd-clock {
  from { box-shadow: 0 0 0 rgba(249, 123, 0, 0); }
  to   { box-shadow: 0 0 22px rgba(249, 123, 0, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
  .gd-chains::before, .gd-onclock { animation: none !important; }
}

/* Print (cheat sheet): drop the field, keep the data */
@media print {
  .gd-field { background: #fff !important; }
  .gd-xo-art, .gd-chains-wrap { display: none !important; }
}