/* nohitter.live — newspaper-meets-scoreboard */

:root {
  --paper:        #f5efe1;
  --paper-edge:   #ece4d2;
  --ink:          #1a1a1a;
  --ink-soft:     #4a4640;
  --ink-rule:     #c8bfa8;
  --gold:         #b58a2b;
  --gold-soft:    #e6c87a;
  --bid-red:      #a32525;
  --serif:        "Lora", "Iowa Old Style", "Hoefler Text", "Baskerville", Georgia, serif;
  --mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --max-width:    1180px;
  --card-radius:  2px;
  --team-color:   #1a1a1a; /* fallback; per-team rules below set this */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Subtle "outfield" wash at the bottom of the page — adds color without
   adding image weight, more visible on tall desktop windows. */
body {
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(46, 92, 50, 0.05) 92%, rgba(46, 92, 50, 0.10) 100%);
  background-attachment: fixed;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- masthead ---------- */

.masthead {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 28px 24px 14px;
  border-bottom: 2px solid var(--ink);
  position: relative;
}
/* A fine red "stitched" line above the masthead's solid divider —
   subtle baseball red without adding noise. */
.masthead::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 4px;
  height: 1px;
  background-image: linear-gradient(90deg, var(--bid-red) 50%, transparent 50%);
  background-size: 8px 1px;
  background-repeat: repeat-x;
  opacity: 0.7;
}

.masthead-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.wordmark {
  margin: 0;
  font-size: clamp(34px, 5.2vw, 54px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.wordmark a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.wordmark .ball-mark {
  width: 0.85em;
  height: 0.85em;
  flex: 0 0 auto;
  display: inline-block;
}
.wordmark .dot { color: var(--bid-red); }
.wordmark a:hover { text-decoration: none; }

.subhead {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.subhead .sep { margin: 0 8px; opacity: 0.5; }

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bid-red);
  animation: live-pulse 1.6s ease-in-out infinite;
}
.live-indicator.stale .live-dot {
  background: var(--ink-soft);
  animation: none;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}


/* ---------- late-drama banner ---------- */

.banner-slot {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}
.banner {
  margin-top: 16px;
  padding: 14px 18px;
  border: 2px solid var(--ink);
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 60%, var(--gold-soft));
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.01em;
}
.banner em { font-style: italic; font-weight: 400; }

/* Whimsical day-state banner — quiet and warm, not dramatic. */
.banner.whimsy {
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  border-left: 3px solid var(--bid-red);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ---------- games grid ---------- */

.games-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
  align-items: start;
}

.loading {
  grid-column: 1 / -1;
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  padding: 60px 0;
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 72px 24px;
}
.empty-state .headline {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 8px;
}
.empty-state .footnote {
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- game card ---------- */

.card {
  background: var(--paper);
  border: 1px solid var(--ink-rule);
  border-left: 6px solid var(--team-color, var(--ink));
  border-radius: var(--card-radius);
  padding: 14px 16px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.card-meta .venue {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 60%;
}

.matchup {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  align-items: baseline;
  font-family: var(--serif);
}
.matchup .row {
  display: contents;
}
.matchup .team {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 22px;
  font-weight: 700;
}
.matchup .tri {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  width: 3.2ch;
  display: inline-block;
}
.matchup .city {
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 14px;
  font-style: italic;
}
.matchup .score {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 700;
  text-align: right;
  min-width: 2ch;
}
.matchup .accent {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--team-color);
  display: inline-block;
  flex: 0 0 auto;
  align-self: center;
}

.no-hitter-block {
  border-top: 1px dashed var(--ink-rule);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.side-status {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  border-left: 3px solid var(--team-color, var(--ink-rule));
  padding-left: 10px;
}
.side-status .header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.side-status .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.side-status .pitcher {
  font-style: italic;
  color: var(--ink-soft);
  font-size: 13px;
  padding-left: 2px;
}
.side-status .pitcher .pitches {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  margin-left: 4px;
  color: var(--ink);
}
.side-status .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

/* ---- per-tier styling: side-status (the per-pitching-side row) ---- */

.side-status.tier-active .tag {
  background: var(--bid-red);
  color: #faf6e8;
  border-color: var(--bid-red);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 3px 11px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
}
.side-status.tier-serious .tag {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}
.side-status.tier-late_drama .tag {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 700;
}
.side-status.tier-perfect .tag {
  background: var(--bid-red);
  color: var(--paper);
  border-color: var(--bid-red);
  font-weight: 700;
}
.side-status.tier-broken {
  filter: saturate(0.6);
}
.side-status.tier-broken .outcome,
.side-status.tier-final .outcome {
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
}
.side-status.tier-broken .outcome strong {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.side-status.tier-final_no_no .outcome.celebrate {
  font-family: var(--serif);
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  color: var(--bid-red);
  letter-spacing: 0.005em;
}
.side-status.tier-final_no_no .tag {
  background: var(--bid-red);
  color: var(--paper);
  border-color: var(--bid-red);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.side-status.tier-final .tag,
.side-status.tier-pre_game .tag {
  background: var(--paper);
  color: var(--ink-soft);
  border-color: var(--ink-rule);
}

/* ---- per-tier styling: card-level (border, stamp, drama) ---- */

.card.tier-serious {
  border-top: 6px solid var(--gold);
  padding-top: 10px;
}

.card.tier-late_drama {
  border: 2px solid var(--ink);
  border-top: 8px solid var(--gold);
  border-left: 8px solid var(--team-color, var(--ink));
  animation: bid-pulse 2.4s ease-in-out infinite;
}
@keyframes bid-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(163, 37, 37, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(163, 37, 37, 0.18); }
}

.card.tier-perfect {
  border: 2px solid var(--bid-red);
  border-top: 8px solid var(--gold);
}
.card.tier-perfect::after {
  content: "PERFECT";
  position: absolute;
  top: 38px;
  right: 14px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bid-red);
  border: 2px solid var(--bid-red);
  padding: 2px 8px;
  transform: rotate(-8deg);
  opacity: 0.85;
  pointer-events: none;
}

.card.tier-final_no_no {
  border: 2px solid var(--bid-red);
  border-top: 10px solid var(--gold);
  background: linear-gradient(180deg, #fcf6e4, var(--paper) 40%);
}
.card.tier-final_no_no::after {
  content: "NO-HITTER";
  position: absolute;
  top: 38px;
  right: 14px;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--bid-red);
  border: 2px solid var(--bid-red);
  padding: 2px 8px;
  transform: rotate(-6deg);
  pointer-events: none;
}

.card.tier-broken,
.card.tier-final {
  color: var(--ink-soft);
  border-left-color: var(--ink-rule);
}

/* Final games are over — darker parchment + faded card so they sit
   visually behind active games, with the same BID LOST corner stamp
   used on broken-in-progress cards. */
.card.tier-final {
  opacity: 0.78;
  background: #ddd2b6;
}
.card.tier-final .status-line {
  font-weight: 700;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: 0.12em;
}

/* In-progress card whose dominant bid was just lost — game still live, so
   keep the card more readable than a final, but mark it lost. */
.card.tier-broken {
  opacity: 0.92;
}

.card.tier-broken::after,
.card.tier-final::after {
  content: "BID LOST";
  position: absolute;
  top: 38px;
  right: 14px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
  border: 1.5px solid var(--ink-soft);
  padding: 2px 7px;
  transform: rotate(-6deg);
  opacity: 0.6;
  pointer-events: none;
}

.card.tier-pre_game,
.card.tier-postponed {
  color: var(--ink-soft);
  border-left-style: dashed;
}

.card .probable {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

.bonus-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.bonus-flags .flag {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border: 1px solid var(--ink-rule);
  border-radius: 2px;
  color: var(--ink-soft);
  background: var(--paper);
}
.bonus-flags .flag.combined { color: var(--ink); }
.bonus-flags .flag.pitch-watch { color: var(--bid-red); border-color: var(--bid-red); }

.status-line {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- colophon ---------- */

.colophon {
  max-width: var(--max-width);
  margin: 24px auto 36px;
  padding: 18px 24px 0;
  border-top: 1px solid var(--ink-rule);
  font-size: 13px;
  color: var(--ink-soft);
}
.colophon p { margin: 0 0 6px; }
.colophon .fineprint { font-style: italic; opacity: 0.85; }

/* ---------- responsive ---------- */

@media (max-width: 600px) {
  .games-grid { padding: 16px; gap: 12px; }
  .masthead { padding: 22px 18px 12px; }
  .colophon { margin: 18px auto 28px; padding: 16px 18px 0; }
  .matchup .team { font-size: 20px; }
  .matchup .score { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .live-dot, .tier-late_drama { animation: none !important; }
  .tier-late_drama { box-shadow: 0 0 0 3px rgba(163, 37, 37, 0.2); }
}

/* ---------- per-team accent colors ---------- */

.team-BAL { --team-color: #DF4601; }
.team-BOS { --team-color: #BD3039; }
.team-NYY { --team-color: #003087; }
.team-TB,  .team-TBR { --team-color: #092C5C; }
.team-TOR { --team-color: #134A8E; }
.team-CWS, .team-CHW { --team-color: #27251F; }
.team-CLE { --team-color: #0C2340; }
.team-DET { --team-color: #0C2340; }
.team-KC,  .team-KCR { --team-color: #004687; }
.team-MIN { --team-color: #002B5C; }
.team-HOU { --team-color: #002D62; }
.team-LAA { --team-color: #BA0021; }
.team-OAK, .team-ATH { --team-color: #003831; }
.team-SEA { --team-color: #0C2C56; }
.team-TEX { --team-color: #003278; }
.team-ATL { --team-color: #13274F; }
.team-MIA { --team-color: #00A3E0; }
.team-NYM { --team-color: #002D72; }
.team-PHI { --team-color: #E81828; }
.team-WSH { --team-color: #AB0003; }
.team-CHC { --team-color: #0E3386; }
.team-CIN { --team-color: #C6011F; }
.team-MIL { --team-color: #12284B; }
.team-PIT { --team-color: #27251F; }
.team-STL { --team-color: #C41E3A; }
.team-AZ,  .team-ARI { --team-color: #A71930; }
.team-COL { --team-color: #333366; }
.team-LAD { --team-color: #005A9C; }
.team-SD,  .team-SDP { --team-color: #2F241D; }
.team-SF,  .team-SFG { --team-color: #FD5A1E; }