/* LIA — League Intelligence Agent — web UI.
   Token values derive from the official bronze badge: navy enamel ground,
   brass/gold metalwork, engraved serif lettering. Token NAMES are unchanged and
   deliberately mirror client/lib/widgets/*.dart: the radii, alphas, font sizes
   and letter-spacings below are the same numbers the Flutter widgets use, so
   the browser and the phone render the same product rather than two cousins.
   Mint (--live) is reserved for live/positive state only; all interactive
   accents are brass (--accent) / polished gold (--accent-bright). */
:root {
  --bg: #0A0F1A;
  --surface: #121B2C;
  --surface-alt: #182338;
  --border: #2A3854;
  --text: #EAEEF6;
  --muted: #97A3B8;
  --faint: #66738A;
  --live: #00E5A0;
  --warn: #FFB020;
  --danger: #FF5C5C;
  --accent: #C9A961;
  --accent-bright: #E3C27E;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.num { font-variant-numeric: tabular-nums; }

/* --- Classification strip (dossier chrome above the app bar) --- */
.classify {
  height: 22px; padding: 5px 16px;
  font: 10px/1.2 "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em; color: var(--faint);
  border-bottom: 1px solid var(--border);
  text-align: center; white-space: nowrap; overflow: hidden;
}

/* --- App bar (Flutter AppBar) --- */
header.top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg); z-index: 20;
}
.wordmark {
  font-family: Cinzel, Georgia, "Times New Roman", serif;
  font-size: 17px; font-weight: 700; letter-spacing: .12em;
  color: var(--accent-bright);
}
.wordmark .badge-slot img {
  width: 26px; height: 26px; border-radius: 6px;
  vertical-align: middle; margin-right: 9px;
}
nav.top { display: flex; gap: 6px; margin-left: auto; }
nav.top a {
  padding: 7px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
  color: var(--muted); border: 1px solid var(--border); background: var(--surface);
}
nav.top a:hover { color: var(--text); }
nav.top a.active {
  background: rgba(201,169,97,.14); color: var(--accent); border-color: rgba(201,169,97,.45);
}

/* Flutter's ListView spans the viewport; match it rather than centring a
   narrow column, so the two clients frame content identically. */
.wrap { padding: 0 0 28px; }

/* --- StatusPill (common.dart) --- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .6px;
  background: rgba(151,163,184,.12); color: var(--muted);
  border: 1px solid rgba(151,163,184,.32);
}
.pill.live { background: rgba(0,229,160,.12); color: var(--live); border-color: rgba(0,229,160,.32); }
.pill.warn { background: rgba(255,176,32,.12); color: var(--warn); border-color: rgba(255,176,32,.32); }
.pill.danger { background: rgba(255,92,92,.12); color: var(--danger); border-color: rgba(255,92,92,.32); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
       animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:.35 } 50% { opacity:1 } }

/* --- Filter chips (scoreboard_screen.dart _Chip) --- */
.chiprow { display: flex; gap: 8px; padding: 7px 16px; height: 46px; align-items: center;
           overflow-x: auto; }
.chip-filter {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.chip-filter:hover { color: var(--text); }
.chip-filter.on {
  background: rgba(201,169,97,.14); border-color: rgba(201,169,97,.45); color: var(--accent);
}

/* --- Card (game_card.dart) --- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px 12px 12px 14px; margin: 0 16px 10px;
}
.card.live { border-color: rgba(0,229,160,.35); }
.card-head { display: flex; align-items: center; }
.parsed { margin-left: auto; display: flex; align-items: center; gap: 4px;
          color: var(--faint); font-size: 11px; }

/* --- TeamMark (common.dart): rounded square, team-tinted --- */
.mark {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; border-style: solid; border-width: 1px;
}
.mark img { display: block; object-fit: contain; }
.mark span { font-weight: 800; }

/* --- Team row (game_card.dart _TeamRow) --- */
.team-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.team-row:first-of-type { margin-top: 12px; }
.team-row .name { font-size: 15px; font-weight: 700; overflow: hidden;
                  text-overflow: ellipsis; white-space: nowrap; }
.team-row .name.dim { font-weight: 500; color: var(--muted); }
.team-row .score { margin-left: auto; font-size: 20px; font-weight: 800; }
.team-row .score.dim { color: var(--muted); }
.ball { color: var(--live); font-size: 13px; }

/* --- Game app bar (game_screen.dart AppBar) --- */
.gamebar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.gamebar .back { color: var(--text); font-size: 19px; line-height: 1; padding: 2px 4px; }
.gamebar .back:hover { color: var(--accent-bright); }
.gamebar .matchup { font-size: 16px; font-weight: 800; letter-spacing: 1px; }
.iconbtn { background: none; border: none; color: var(--muted); font-size: 17px;
           padding: 4px 8px; cursor: pointer; }
.iconbtn:hover { color: var(--accent-bright); background: none; }

/* --- TabBar (game_screen.dart) --- */
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tabs a {
  flex: 1; text-align: center; padding: 13px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--faint); border-bottom: 2px solid transparent;
}
.tabs a:hover { color: var(--muted); }
.tabs a.active { color: var(--text); border-bottom-color: var(--accent); }

/* --- Score header (game_screen.dart _ScoreHeader) --- */
.scorehead { padding: 14px 16px; border-bottom: 1px solid var(--border); }
.scorehead .row { display: flex; align-items: center; }
.scorehead .side { flex: 1; }
.scorehead .side.right { text-align: right; }
.scorehead .abbr { color: var(--muted); font-size: 12px; font-weight: 800;
                   letter-spacing: 1px; margin-top: 6px; }
.scorehead .big { font-size: 34px; font-weight: 900; line-height: 1.1; margin-top: 2px; }
.scorehead .meta { text-align: center; color: var(--faint); font-size: 11px; margin-top: 10px; }

/* --- PlayTile (play_tile.dart) --- */
.play { display: flex; background: var(--surface); border: 1px solid var(--border);
        border-radius: 12px; margin: 0 16px 8px; overflow: hidden; }
.play.score { border-color: rgba(0,229,160,.4); }
.play .accent { width: 3px; flex: none; }
.play .body { flex: 1; padding: 10px 12px; min-width: 0; }
.play .meta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--faint); }
.play .meta .clock { font-weight: 700; }
.play .text { margin-top: 6px; font-size: 13.5px; line-height: 1.42; }
.play .text.void { color: var(--faint); text-decoration: line-through; }
.tag { margin-left: 6px; padding: 2px 6px; border-radius: 4px;
       font-size: 9.5px; font-weight: 800; letter-spacing: .5px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
  background: var(--surface-alt); border: 1px solid var(--border); border-radius: 7px;
  font-size: 11.5px;
}
.chip b { font-weight: 700; }
.chip .sum { color: var(--muted); font-variant-numeric: tabular-nums; }
.chip .ico { width: 12px; height: 12px; flex: none; }

/* --- Section label (common.dart SectionLabel) --- */
.section-label { padding: 20px 16px 8px; color: var(--faint);
                 font-size: 11px; font-weight: 700; letter-spacing: 1.2px; }

/* --- Parser panel (parser_panel.dart) --- */
.headline { margin: 16px 16px 0; padding: 18px; border-radius: 14px;
            background: var(--surface); border: 1px solid var(--border);
            display: flex; gap: 20px; align-items: center; }
.headline .pct { font-size: 42px; font-weight: 800; line-height: 1; }
.headline .cap { color: var(--faint); font-size: 10px; font-weight: 800;
                 letter-spacing: 1px; margin-top: 2px; }
.headline .body { font-size: 13px; line-height: 1.45; }
.headline .sub { color: var(--faint); font-size: 11.5px; line-height: 1.4; margin-top: 6px; }
.sourcerow { display: flex; gap: 8px; padding: 4px 16px 0; }
.source { padding: 6px 10px; border-radius: 7px; font-size: 11.5px; font-weight: 700; }
.catbar { padding: 6px 16px; }
.catbar .top { display: flex; align-items: baseline; font-size: 13px; }
.catbar .top .name { font-weight: 600; }
.catbar .top .pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.catbar .top .frac { color: var(--faint); font-size: 11.5px; margin-left: 8px;
                     font-variant-numeric: tabular-nums; }
.bar { height: 5px; background: var(--surface-alt); border-radius: 3px;
       overflow: hidden; margin-top: 6px; }
.bar > i { display: block; height: 100%; }
.mismatch { display: flex; align-items: center; padding: 5px 16px; }
.mismatch .who { flex: 1; }
.mismatch .who b { font-size: 13px; font-weight: 600; }
.mismatch .who small { display: block; color: var(--faint); font-size: 11px; }
.mismatch .v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Tables (stats_view.dart) --- */
.tablecard { margin: 8px 16px 4px; background: var(--surface);
             border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
table { width: 100%; border-collapse: collapse; }
.thead { display: flex; align-items: center; padding: 10px 12px 8px; }
.thead .tick { width: 3px; height: 12px; margin-right: 8px; }
.thead .cat { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
th { font-size: 10px; color: var(--faint); font-weight: 700; text-align: right;
     padding: 8px 6px; }
th.l, td.l { text-align: left; }
td { padding: 9px 6px; text-align: right; font-size: 13px; border-top: 1px solid var(--border);
     font-variant-numeric: tabular-nums; }
td.l { font-weight: 600; font-variant-numeric: normal; }
.pos { color: var(--faint); font-size: 10.5px; margin-left: 6px; }

/* --- Forms --- */
form.startsit { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
label { display: block; font-size: 11px; color: var(--faint); font-weight: 700;
        letter-spacing: .8px; margin-bottom: 6px; }
input[type=text], select {
  background: var(--surface-alt); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 10px 11px; font-size: 13px; min-width: 190px;
}
input[type=text]:focus, select:focus { outline: none; border-color: rgba(201,169,97,.45); }
button {
  background: rgba(201,169,97,.16); border: 1px solid rgba(201,169,97,.45);
  color: var(--accent-bright); border-radius: 8px; padding: 10px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
}
button:hover { background: rgba(201,169,97,.24); }

/* --- Misc --- */
.muted { color: var(--muted); } .faint { color: var(--faint); } .small { font-size: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 16px; }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
.notice { margin: 0 16px 14px; padding: 12px 14px; border-radius: 8px;
          background: var(--surface); border: 1px solid var(--border);
          border-left: 3px solid var(--warn); color: var(--muted);
          font-size: 12.5px; line-height: 1.45; }
.empty { text-align: center; padding: 46px 32px; }
.empty .t { color: var(--muted); font-size: 15px; font-weight: 600; }
.empty .d { color: var(--faint); font-size: 13px; line-height: 1.45; margin-top: 6px; }


/* --- Live auto-update (htmx) --- */
.autopill {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  padding: 0 10px; height: 32px; border-radius: 8px;
  background: rgba(0,229,160,.10); border: 1px solid rgba(0,229,160,.28);
  color: var(--live); font-size: 11px; font-weight: 800; letter-spacing: .6px;
  white-space: nowrap;
}
/* Dim only the fragment being refreshed, never the whole page. */
.htmx-request.htmx-request { opacity: .82; transition: opacity .12s ease; }
#play-feed, #game-list, #score-header { transition: opacity .12s ease; }
.iconbtn.htmx-request { opacity: .5; pointer-events: none; }
/* New plays arrive at the top of the feed; ease them in so the eye catches
   the change instead of the list appearing to jump. */
#play-feed > .play.htmx-added { animation: playin .28s ease both; }
@keyframes playin {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}