/* Three Strikes Club: an old manual ballpark scoreboard. Everything is scoped to .tsc-* so it doesn't fight the theme. */
.tsc-root, .tsc-overlay, .tsc-toast {
  --tsc-ground: #0e1c15;
  --tsc-board: #1d3a2b;
  --tsc-board-deep: #152b20;
  --tsc-line: #2f5442;
  --tsc-chalk: #f1ede0;
  --tsc-chalk-dim: #a9b8ad;
  --tsc-bulb-off: #2a4536;
  --tsc-strike: #e5432f;
  --tsc-strike-glow: rgba(229, 67, 47, .55);
  --tsc-brass: #f2c14e;
  --tsc-brass-ink: #2a1f05;
  --tsc-display: "Graduate", "Rockwell", "Courier New", serif;
  --tsc-body: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
}
.tsc-root *, .tsc-overlay *, .tsc-toast * { box-sizing: border-box; }

.tsc-root {
  background: var(--tsc-ground);
  color: var(--tsc-chalk);
  font-family: var(--tsc-body);
  font-size: 17px;
  line-height: 1.35;
  padding: 20px 16px 28px;
  border-radius: 8px;
  display: grid;
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}

.tsc-root .tsc-top {
  background: var(--tsc-board-deep);
  border: 3px solid var(--tsc-line);
  border-radius: 6px;
  padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
}
.tsc-root .tsc-title {
  font-family: var(--tsc-display); font-weight: 400;
  font-size: clamp(26px, 5.5vw, 40px); letter-spacing: .04em; line-height: 1;
  margin: 0; padding: 0; color: var(--tsc-chalk); text-transform: none;
}
.tsc-root .tsc-sub { color: var(--tsc-chalk-dim); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.tsc-root .tsc-mode {
  display: inline-block; margin-top: 8px;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--tsc-brass-ink); background: var(--tsc-brass); border-radius: 3px; padding: 3px 8px;
}
.tsc-root .tsc-outs { display: flex; align-items: center; gap: 10px; font-family: var(--tsc-display); font-size: 17px; letter-spacing: .1em; }
.tsc-root .tsc-outs-lights { display: flex; gap: 6px; }
.tsc-root .tsc-outs-lights span { width: 14px; height: 14px; border-radius: 50%; background: var(--tsc-bulb-off); box-shadow: inset 0 2px 3px rgba(0,0,0,.4); }
.tsc-root .tsc-outs-lights span.on { background: var(--tsc-brass); box-shadow: 0 0 10px rgba(242,193,78,.6); box-shadow: 0 0 10px color-mix(in srgb, var(--tsc-brass) 60%, transparent); }

.tsc-root .tsc-notice { color: var(--tsc-chalk-dim); font-size: 15px; margin: 0; }
.tsc-root .tsc-notice a { color: var(--tsc-brass); }

.tsc-root .tsc-board { background: var(--tsc-board); border: 3px solid var(--tsc-line); border-radius: 6px; overflow: hidden; }
.tsc-root .tsc-head, .tsc-root .tsc-row {
  display: grid; grid-template-columns: 96px 150px 1fr; align-items: center; gap: 16px; padding: 14px 18px;
}
.tsc-root .tsc-head {
  background: var(--tsc-board-deep); padding-top: 10px; padding-bottom: 10px;
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--tsc-chalk-dim);
}
.tsc-root .tsc-row + .tsc-row { border-top: 2px solid var(--tsc-line); }
.tsc-root .tsc-name {
  font-family: var(--tsc-display); font-size: 32px; line-height: 1; overflow-wrap: anywhere;
  background: var(--tsc-board-deep); border: 2px solid var(--tsc-line); border-radius: 4px;
  text-align: center; padding: 10px 4px 8px;
}
.tsc-root .tsc-row.is-out .tsc-name { color: var(--tsc-strike); border-color: var(--tsc-strike); }
.tsc-root .tsc-bulbs { display: flex; gap: 12px; align-items: center; }
.tsc-root .tsc-bulb {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #37584a, var(--tsc-bulb-off) 60%);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tsc-bulb-off), #fff 14%), var(--tsc-bulb-off) 60%);
  box-shadow: inset 0 3px 5px rgba(0,0,0,.45);
  transition: background .2s, box-shadow .2s;
}
.tsc-root .tsc-bulb.on {
  background: radial-gradient(circle at 35% 30%, #ff9c86, var(--tsc-strike) 55%, #a3261a);
  box-shadow: 0 0 14px var(--tsc-strike-glow), inset 0 -2px 4px rgba(0,0,0,.3);
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--tsc-strike), #fff 45%), var(--tsc-strike) 55%, color-mix(in srgb, var(--tsc-strike), #000 30%));
  box-shadow: 0 0 14px color-mix(in srgb, var(--tsc-strike) 55%, transparent), inset 0 -2px 4px rgba(0,0,0,.3);
}
.tsc-root .tsc-bulb.pop { animation: tsc-pop .45s ease-out; }
@keyframes tsc-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

.tsc-root .tsc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Buttons: reset theme styles explicitly. */
.tsc-root button {
  font-family: var(--tsc-body); font-weight: 600; font-size: 16px; line-height: 1.2;
  letter-spacing: .03em; text-transform: none; text-decoration: none;
  margin: 0; min-height: 0; width: auto; box-shadow: none; text-shadow: none;
  border-radius: 4px; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.tsc-root button:disabled { opacity: .35; cursor: not-allowed; }
.tsc-root button:focus-visible { outline: 3px solid var(--tsc-brass); outline-offset: 2px; }
.tsc-root button.tsc-pitch {
  color: var(--tsc-chalk); background: transparent; border: 2px solid var(--tsc-chalk-dim); padding: 7px 12px;
}
.tsc-root button.tsc-pitch:hover:not(:disabled) { background: var(--tsc-chalk); color: var(--tsc-board-deep); border-color: var(--tsc-chalk); }
.tsc-root .tsc-mod { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.tsc-root .tsc-mod button {
  font-weight: 700; font-size: 15px; background: var(--tsc-brass); color: var(--tsc-brass-ink);
  border: 2px solid var(--tsc-brass); padding: 6px 11px; min-width: 38px;
}
.tsc-root .tsc-mod button.ghost { background: transparent; color: var(--tsc-brass); }
.tsc-root button.tsc-replay {
  font-size: 14px; font-weight: 500; color: var(--tsc-chalk-dim); background: none; border: 0;
  text-decoration: underline; padding: 4px;
}
.tsc-root .tsc-stamp {
  font-family: var(--tsc-display); font-size: 22px; letter-spacing: .08em; line-height: 1.1;
  color: var(--tsc-strike); border: 3px solid var(--tsc-strike); border-radius: 4px;
  padding: 2px 10px 0; transform: rotate(-6deg); display: inline-block;
}

.tsc-root .tsc-log { background: var(--tsc-board-deep); border: 3px solid var(--tsc-line); border-radius: 6px; padding: 14px 18px; }
.tsc-root .tsc-log h3 { font-family: var(--tsc-display); font-weight: 400; font-size: 19px; letter-spacing: .08em; margin: 0 0 10px; color: var(--tsc-chalk); text-transform: none; }
.tsc-root .tsc-log ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tsc-root .tsc-log li { display: flex; gap: 12px; align-items: baseline; font-size: 16px; margin: 0; }
.tsc-root .tsc-log .who { font-family: var(--tsc-display); min-width: 38px; }
.tsc-root .tsc-log .when { margin-left: auto; color: var(--tsc-chalk-dim); font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }
.tsc-root .tsc-log .empty { color: var(--tsc-chalk-dim); }

.tsc-toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 100000;
  background: var(--tsc-chalk); color: var(--tsc-board-deep);
  font-family: var(--tsc-body); font-weight: 600; font-size: 16px;
  padding: 10px 16px; border-radius: 4px; max-width: calc(100% - 32px);
}
.tsc-toast[hidden], .tsc-overlay[hidden], .tsc-root [hidden] { display: none !important; }

/* Umpire overlay */
.tsc-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(6, 14, 10, .88);
  background: color-mix(in srgb, var(--tsc-ground) 90%, transparent);
  display: grid; place-items: center; padding: 16px; cursor: pointer;
  font-family: var(--tsc-body); color: var(--tsc-chalk);
}
.tsc-overlay .tsc-ump-card { display: grid; justify-items: center; gap: 4px; text-align: center; max-width: 100%; }
.tsc-overlay svg { width: min(360px, 82vw); height: auto; }
.tsc-overlay img.tsc-out-img {
  display: block; width: auto; height: auto;
  max-width: min(460px, 88vw); max-height: 52vh;
  border-radius: 6px; margin: 0 auto 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.tsc-overlay .tsc-yer-out {
  font-family: var(--tsc-display); color: var(--tsc-strike);
  font-size: clamp(38px, 11vw, 78px); line-height: .95; letter-spacing: .03em;
  text-shadow: 0 4px 0 #5b130b;
  text-shadow: 0 4px 0 color-mix(in srgb, var(--tsc-strike), #000 60%);
  animation: tsc-slam .5s cubic-bezier(.2,1.6,.4,1) .55s both;
}
.tsc-overlay .tsc-out-who { font-family: var(--tsc-display); font-size: clamp(20px, 5vw, 30px); letter-spacing: .06em; }
.tsc-overlay .tsc-out-how { color: var(--tsc-chalk-dim); letter-spacing: .14em; text-transform: uppercase; font-size: 15px; }
@keyframes tsc-slam { 0% { transform: scale(2.6) rotate(-8deg); opacity: 0; } 100% { transform: scale(1) rotate(-3deg); opacity: 1; } }

.tsc-overlay .tsc-arm { transform-origin: 212px 132px; animation: tsc-punch 1.5s ease-in-out 2 both; }
.tsc-overlay .tsc-torso { transform-origin: 170px 250px; animation: tsc-lean 1.5s ease-in-out 2 both; }
.tsc-overlay .tsc-dust { animation: tsc-dust 1.5s ease-out 2 both; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tsc-overlay .tsc-zip { animation: tsc-zip 1.5s ease-out 2 both; opacity: 0; }
@keyframes tsc-punch {
  0%   { transform: rotate(10deg); }
  30%  { transform: rotate(40deg); }
  48%  { transform: rotate(-128deg); }
  56%  { transform: rotate(-116deg); }
  82%, 100% { transform: rotate(-120deg); }
}
@keyframes tsc-lean {
  0%, 30% { transform: rotate(0deg); }
  48% { transform: rotate(-5deg) translateY(-4px); }
  100% { transform: rotate(-3deg) translateY(-2px); }
}
@keyframes tsc-dust {
  0%, 42% { opacity: 0; transform: scale(.3); }
  55% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes tsc-zip { 0%, 44% { opacity: 0; } 52% { opacity: 1; } 75%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tsc-overlay .tsc-arm { animation: none; transform: rotate(-120deg); }
  .tsc-overlay .tsc-torso, .tsc-overlay .tsc-dust, .tsc-overlay .tsc-zip, .tsc-overlay .tsc-yer-out, .tsc-root .tsc-bulb.pop { animation: none; }
}

@media (max-width: 640px) {
  .tsc-root .tsc-head { display: none; }
  .tsc-root .tsc-row { grid-template-columns: 72px 1fr; gap: 12px 14px; padding: 14px 14px; }
  .tsc-root .tsc-name { font-size: 24px; padding: 8px 2px 6px; }
  .tsc-root .tsc-bulb { width: 26px; height: 26px; }
  .tsc-root .tsc-actions { grid-column: 1 / -1; }
  .tsc-root .tsc-mod { margin-left: 0; }
}