/* The game sheet — the panel that opens when you click a game.

   Two faces of one thing: the live field view (fv-) for a game in progress,
   and the tale of the tape (mu-) for one that hasn't kicked off. Both are the
   same card in the same tray.

   Lived inside rooting-guide.html until 12 Aug 2026, when the team pages
   needed the identical sheet. Copying it would have been two sheets drifting
   apart by October, so it moved here and both pages link it. Expects the
   tokens from blog.css (--panel, --line, --ink, --faint, --muted). */

.fv-back{position:fixed;inset:0;background:rgba(0,0,0,.62);display:flex;align-items:flex-end;
  justify-content:center;z-index:60}
.fv-card{background:var(--panel);border:1px solid var(--line);border-radius:18px 18px 0 0;
  width:min(680px,100%);padding:18px;display:flex;flex-direction:column;gap:14px}
.fv-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.fv-score{font:700 17px Inter,system-ui}
.fv-clock{color:var(--faint);font-size:13px;margin-top:2px}
.fv-x{background:none;border:none;color:var(--faint);font:600 14px Inter,system-ui;cursor:pointer;padding:4px}
.fv-field{display:flex;height:110px;border-radius:10px;overflow:hidden}
.fv-ez{width:11%;display:flex;align-items:center;justify-content:center}
.fv-ez span{color:#fff;font:800 10px Inter,system-ui;letter-spacing:1px;transform:rotate(-90deg);white-space:nowrap}
.fv-turf{flex:1;background:#2E7D46;position:relative}
.fv-stripe{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
.fv-stripe.mid{background:rgba(255,255,255,.6)}
.fv-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px}
.fv-los{background:#fff}
.fv-fd{background:#FFD54A}
.fv-ball{position:absolute;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.45)}
.fv-ball img{width:22px;height:22px;object-fit:contain}
.fv-sit{font:600 14px Inter,system-ui}
.fv-prob{display:flex;flex-direction:column;gap:6px}
.fv-prob .cap{font:600 13px Inter,system-ui}
.fv-prob .cap b{color:#9FE0B5}
.fv-bar{height:10px;border-radius:5px;background:#3a4040;overflow:hidden}
.fv-bar i{display:block;height:100%;border-radius:5px;transition:width .6s ease}
.fv-play{font-size:13px;line-height:1.5;color:var(--faint)}
.fv-play b{color:var(--ink);text-transform:uppercase;letter-spacing:1px;font-size:11px;display:block;margin-bottom:2px}
.fv-note{text-align:center;color:var(--faint);font-size:12px}

/* --- Matchup panel --- */
.mu-venue{color:var(--faint);font-size:13px}
.mu-line{background:var(--panel-hi);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;font:700 14px Inter,system-ui;color:#E8B23A}
.mu-wx{color:var(--muted);font-size:13px}
.mu-tape{display:flex;align-items:flex-end;padding-top:4px}
.mu-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.mu-team img{width:38px;height:38px;object-fit:contain;background:#fff;border-radius:50%;padding:3px}
.mu-team b{font-size:13px}
.mu-mid{width:96px}
.mu-row{display:flex;align-items:center;padding:5px 0}
.mu-row .v{flex:1;font:700 14px Inter,system-ui;font-variant-numeric:tabular-nums}
.mu-row .v.r{text-align:right}
.mu-row .l{width:96px;text-align:center;color:var(--faint);font-size:12px}
.mu-pips{flex:1;display:flex;gap:5px}
.mu-pips.r{justify-content:flex-end}
.mu-pip{width:9px;height:9px;border-radius:5px}
.mu-recent{padding-top:8px}
.mu-recent h4{font:800 11px Inter,system-ui;letter-spacing:1px;color:var(--orange-hi);
  text-transform:uppercase;margin-bottom:4px}
.mu-recent .rr{display:flex;gap:8px;align-items:center;font-size:13px;padding:2px 0}
.mu-recent .rr .wl{width:14px;font-weight:800}
.mu-recent .rr .sc{width:52px;font-variant-numeric:tabular-nums}
.mu-recent .rr img{width:18px;height:18px;object-fit:contain;background:#fff;border-radius:50%;padding:1px}
.mu-recent .rr .op{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mu-recent .rr .wk{color:var(--faint)}
.mu-opener{color:var(--muted);font-size:14px;padding:6px 0}
/* Out to the team pages. The roster is a gameday reference, and this is the
   sheet already open when somebody asks who number 4 is. */
.mu-rosters{display:flex;gap:10px;flex-wrap:wrap;padding-top:14px;margin-top:12px;
  border-top:1px solid var(--line)}
.mu-roster{display:inline-flex;align-items:center;gap:8px;background:var(--panel-hi);
  border:1px solid var(--line);border-radius:11px;padding:8px 13px;
  font:800 13px var(--body);color:var(--ink);text-decoration:none}
.mu-roster:hover{border-color:#3a4a41}
.mu-roster img{width:20px;height:20px;object-fit:contain;background:#fff;
  border-radius:50%;padding:1px}