/* commentary.css
   Championship Manager 01/02 match-screen idiom. Deep blue screen, team-coloured
   score bars, gold minute box, green inning strip, and a white commentary box whose
   text wears the BATTING team's colour (engine sets --battA / --battB per side).
   Namespaced .tt- so it will not collide with the gameday page. */

.tt-cm{
  --cm-top:#2f3aa0; --cm-bot:#161d5e; --cm-edge:#0c1030;
  --cm-green:#46cf7a; --cm-gold:#ffcf3f;
  --face:"Tahoma","Arial Narrow",Arial,sans-serif;
  display:block; width:620px; max-width:100%; margin:0 auto; padding:10px;
  background:linear-gradient(180deg,var(--cm-top),var(--cm-bot));
  border:2px solid var(--cm-edge); color:#fff; font-family:var(--face);
}

/* ---- top bar: minute box + two team bars ---- */
.tt-topbar{ display:grid; grid-template-columns:56px 1fr 1fr; gap:6px; }
.tt-min{
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:700; color:var(--cm-gold);
  background:linear-gradient(180deg,#212a72,#10163f); border:1px solid var(--cm-edge);
}
.tt-teambar{
  display:flex; align-items:center; gap:10px; padding:9px 14px;
  border:1px solid var(--cm-edge); font-weight:700; font-size:17px;
  background:#333; color:#fff; overflow:hidden; white-space:nowrap;
}
.tt-awaybar{ justify-content:flex-start }
.tt-homebar{ justify-content:flex-end }
.tt-tn{ text-overflow:ellipsis; overflow:hidden }
.tt-ts{ font-size:21px; font-weight:700 }

/* ---- green inning strip (the "Second Half" line) ---- */
.tt-inning{
  text-align:center; color:var(--cm-green); font-weight:700;
  font-size:13px; letter-spacing:1px; padding:8px 0 2px;
}
/* ---- gold event line (the "Mills 39" line) ---- */
.tt-eventline{
  text-align:center; color:var(--cm-gold); font-weight:700;
  font-size:13px; padding-bottom:8px; min-height:18px;
}

/* ---- status row: bases diamond + balls/strikes/outs ---- */
.tt-statusrow{
  display:flex; align-items:center; justify-content:center; gap:18px;
  padding:2px 0 6px;
}
.tt-bases{ width:40px; height:34px; }
.tt-base{ fill:none; stroke:#8f9bd8; stroke-width:2; }
.tt-base.on{ fill:var(--cm-gold); stroke:var(--cm-gold); }
.tt-count{ display:flex; gap:14px; }
.tt-cg{ display:flex; align-items:center; gap:5px; color:#c7cef0; font-weight:700; font-size:12px; }
.tt-cg em{ font-style:normal; opacity:.8; }
.tt-pip{
  width:9px; height:9px; border-radius:50%;
  border:1px solid #6570b8; box-sizing:border-box; display:inline-block;
}
.tt-pip.b{ background:var(--cm-green); border-color:var(--cm-green); }
.tt-pip.s{ background:#ffcf3f; border-color:#ffcf3f; }
.tt-pip.o{ background:#e0575f; border-color:#e0575f; }

/* ---- the white commentary box: FIXED size (wider, thinner), text swaps inside ---- */
.tt-commbox{
  background:#fff; border:2px solid var(--cm-edge);
  height:96px; display:flex; align-items:stretch; overflow:hidden;
}
.tt-comm{
  flex:1; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px 24px; color:var(--battA,#14309f); font-weight:700; font-size:18px; line-height:1.3;
}
.tt-comm.tt-big{ font-size:20px }
.tt-comm.tt-colour{ font-weight:600; font-size:15px; font-style:italic }
.tt-txt{ max-width:560px; max-height:100%; overflow:hidden; }

/* home run: strobe the box in the batting team's colours */
@keyframes tt-hrflash{
  0%,49.9%{ background:#fff; color:var(--battA,#14309f); }
  50%,100%{ background:var(--battA,#14309f); color:var(--battB,#fff); }
}
.tt-comm.tt-hr{ font-size:24px; letter-spacing:.5px; animation:tt-hrflash .18s steps(1,end) infinite; }

@media (prefers-reduced-motion:reduce){
  .tt-comm.tt-hr{ animation:none; background:var(--battA,#14309f); color:var(--battB,#fff); }
}