/* Monday Night Football squares (/mnf30, /mnf100).
   Builds on css/styles.css — the board frame, grid, winner highlight, modal, pot block,
   status pill and history table all come from there. This file only supplies the NFL
   identity, the square-number badges and the football-glyph money styling.
   NOTE: money on these pages is POINTS and is NEVER rendered with a "$" — the .fb glyph
   stands in for the dollar sign everywhere. */
:root {
  --mnf-field: #0b3d2c;      /* deep field green */
  --mnf-field-2: #14603f;
  --mnf-chalk: #eaf3ee;
  --mnf-home: #14603f;       /* top axis (home) */
  --mnf-away: #1f3350;       /* side axis (away) */
  --mnf-accent: #f4b400;
  --mnf-line: #d8e3dc;
}
/* the 100-point board runs a claret accent so the two are never confused at a glance */
.mnf-page[data-board="100"] {
  --mnf-field: #7a2230;
  --mnf-field-2: #9c2f3f;
  --mnf-home: #9c2f3f;
  --mnf-away: #2b2f46;
}

/* ------------------------------ Header + pot ------------------------------ */
.mnf-header { background: linear-gradient(135deg, var(--mnf-field), var(--mnf-field-2)); color: #fff; position: relative; }
.mnf-header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.09) 2px, transparent 2px, transparent 64px);
}
.mnf-header .header-inner { position: relative; z-index: 1; }
.mnf-header .back-link { color: #dbe9e1; }
.mnf-header .site-title, .mnf-header .subtitle { color: #fff; }
.mnf-title-accent { color: var(--mnf-accent); text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.pot-note { font-size: .68rem; color: rgba(255,255,255,.8); margin-top: 2px; }
.mnf-main { display: grid; gap: 14px; padding-bottom: 44px; }

/* the football glyph that replaces "$" on every money figure */
.fb { font-style: normal; margin-right: .18em; }
.pot-amount .fb { font-size: .82em; vertical-align: .04em; }

.mnf-updated { width: fit-content; max-width: 100%; margin: 0 auto; padding: 6px 14px;
  font-size: .82rem; font-weight: 700; color: var(--mnf-field); background: var(--mnf-chalk);
  border: 1px solid var(--mnf-line); border-radius: 999px; text-align: center; }
.mnf-updated.is-waiting { color: var(--ink-soft); font-weight: 600; background: #f3f4f2; border-color: var(--line); }

/* ------------------------------ The game ------------------------------ */
.mnf-game-card .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 6px; margin: 0; }
.mnf-game-card h2 { margin: 0; font-size: 1.05rem; }
.mnf-matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 8px 16px 14px; }
.mnf-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mnf-team.is-away { justify-content: flex-start; }
.mnf-team.is-home { justify-content: flex-end; flex-direction: row-reverse; }
.mnf-team-logo { width: 46px; height: 46px; object-fit: contain; flex: 0 0 auto; }
.mnf-team-txt { display: flex; flex-direction: column; min-width: 0; }
.mnf-team.is-home .mnf-team-txt { align-items: flex-end; }
.mnf-team-name { font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnf-team-side { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.mnf-team-score { font-size: 2rem; font-weight: 900; color: var(--mnf-field); font-variant-numeric: tabular-nums; line-height: 1; }
.mnf-team-digit { font-size: .66rem; font-weight: 800; color: var(--ink-soft); }
.mnf-team-digit b { color: var(--mnf-accent); background: var(--mnf-field); border-radius: 4px; padding: 0 5px; margin-left: 3px; }
.mnf-vs { font-size: .72rem; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; }
.mnf-game-note { margin: 0; padding: 0 16px 14px; font-size: .82rem; color: var(--ink-soft); text-align: center; }
.mnf-game-empty { padding: 6px 16px 18px; text-align: center; color: var(--ink-soft); }

/* ------------------------------ Board ------------------------------ */
.mnf-board-card .card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 16px 8px; margin: 0; }
.mnf-board-card h2 { margin: 0; font-size: 1.05rem; }
.mnf-week-nav { display: inline-flex; align-items: center; gap: 6px; }
.mnf-week-nav select { font: inherit; font-weight: 700; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; min-height: 36px; }
.board-frame { padding: 0 12px 4px; }
.mnf-corner { display: flex; align-items: center; justify-content: center; background: var(--mnf-field);
  color: #fff; border-radius: var(--radius-sm); font-weight: 900; letter-spacing: .04em; font-size: 1.1rem; }

/* The axes wear the WEEK'S TEAM COLOURS. js/mnf.js sets --mnf-home/-2/-ink and
   --mnf-away/-2/-ink on #mnf-frame from the ESPN team palette (with a contrast-safe
   ink, since some primaries are light and some alternates are white). These defaults
   are the fallback when a colour is missing or the game isn't known yet. */
.mnf-page .board-frame {
  --mnf-home-2: #2c8a5e;
  --mnf-away-2: #3f5f8f;
  --mnf-home-ink: #ffffff;
  --mnf-away-ink: #ffffff;
}
.mnf-page .board-banner.is-home { background: linear-gradient(120deg, var(--mnf-home), var(--mnf-home-2)); color: var(--mnf-home-ink); }
.mnf-page .board-banner.is-away { background: linear-gradient(160deg, var(--mnf-away) 35%, var(--mnf-away-2)); color: var(--mnf-away-ink); }
.mnf-page .board .corner { background: var(--mnf-field); }
.mnf-page .board .digit-top { background: var(--mnf-home); color: var(--mnf-home-ink); }
.mnf-page .board .digit-side { background: var(--mnf-away); color: var(--mnf-away-ink); }
.mnf-page .board .digit-top.win-digit, .mnf-page .board .digit-side.win-digit { background: var(--mnf-accent); color: #3a2c00; }
/* the padlocked (numbers-not-drawn) headers must stay neutral, not team-coloured */
.mnf-page .board .digit-top.locked, .mnf-page .board .digit-side.locked { background: #6b7688; color: #eef2f7; }

/* square index 1-100 in the corner, like the paper board */
.mnf-page .board td.name-cell { position: relative; padding-top: 11px; }
.sq-no { position: absolute; top: 1px; left: 3px; font-size: .5rem; font-weight: 700; color: #b9c4cf; line-height: 1; pointer-events: none; }
.mnf-page .board td.win-cell .sq-no { color: #a98b3a; }
.mnf-page .board td.land-cell .sq-no { color: #7d8b9e; }

.mnf-note { margin: 6px 16px 0; padding: 8px 12px; background: var(--mnf-chalk); border: 1px solid var(--mnf-line);
  border-radius: var(--radius-sm); font-size: .85rem; color: var(--ink); }
.mnf-note[hidden] { display: none; }
.board-help { margin: 10px 16px 16px; font-size: .8rem; color: var(--ink-soft); line-height: 1.5; }

/* ------------------------------ History ------------------------------ */
.history-card .card-head { padding: 14px 16px 6px; margin: 0; }
.history-card h2 { margin: 0; font-size: 1.05rem; }
.history-scroll { overflow-x: auto; padding: 0 8px 12px; }
.history-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.history-table th { text-align: left; font-size: .66rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.history-table td { padding: 7px 8px; border-bottom: 1px solid #eef2f7; white-space: nowrap; }
.history-table tr.is-viewing { background: #fff8e6; box-shadow: inset 3px 0 0 var(--mnf-accent); }
.history-table tr[role="button"] { cursor: pointer; }
.history-table tr[role="button"]:hover { background: var(--mnf-chalk); }
.history-table td.hist-money { font-variant-numeric: tabular-nums; font-weight: 700; }
.win-tag { display: inline-block; font-weight: 800; }
.win-tag.roll { color: var(--ink-soft); font-style: italic; font-weight: 700; }
.win-tag.pending { color: #b9c4cf; }

/* ------------------------------ Admin extras ------------------------------ */
.checkbox-field { flex-direction: row !important; align-items: center; gap: 8px; }
.checkbox-field input { width: auto; }
.mnf-adv { margin: 10px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; }
.mnf-adv > summary { cursor: pointer; font-weight: 700; font-size: .88rem; }
.mnf-score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.names-scroll { max-height: 42vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.names-edit { border-collapse: collapse; }
.names-edit td { padding: 1px; }
.names-edit input { width: 84px; font: inherit; font-size: .74rem; padding: 4px 5px; border: 1px solid var(--line); border-radius: 4px; }
.names-edit .nm-digit { background: var(--mnf-field); color: #fff; font-weight: 800; font-size: .72rem;
  text-align: center; min-width: 22px; padding: 2px 4px; position: sticky; left: 0; }
.names-edit thead th { background: var(--mnf-home); color: #fff; font-size: .72rem; font-weight: 800; padding: 3px 4px; }

/* ------------------------------ Phones ------------------------------ */
@media (max-width: 599px) {
  .mnf-matchup { grid-template-columns: 1fr auto 1fr; gap: 6px; padding: 8px 10px 14px; }
  .mnf-team-logo { width: 34px; height: 34px; }
  .mnf-team-score { font-size: 1.5rem; }
  .mnf-team-name { font-size: .82rem; }
  .board-frame { padding: 0 6px 4px; }
  .mnf-week-nav { width: 100%; justify-content: space-between; }
  .history-table { font-size: .78rem; }
}