/*
 * Series File is part of the recovered game bundle, so its small live-playoff
 * refinements are shipped as a lab stylesheet. Keep the tabs above the box
 * score scroll region: on phones the report must never paint across them.
 */
.bl-series-inspector .bl-series-game-tabs {
  position: relative;
  z-index: 3;
  display: flex;
  flex: 0 0 auto;
  align-items: flex-end;
  min-height: 42px;
  background: var(--program-paper);
  overscroll-behavior-x: contain;
}

.bl-series-inspector .bl-series-game-tab {
  min-width: 43px;
  padding: 7px 10px 8px;
  text-align: center;
  transform: none;
}

.bl-series-inspector .boxscore-body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
}

/* A finished pairing reads like a filed result: advance the winner and mark
 * the eliminated club with a single red pencil stroke. */
.bl-series-team.winner {
  font-weight: 900;
}

.bl-series-team.loser .bl-series-name {
  position: relative;
  color: color-mix(in srgb, var(--program-muted-ink) 82%, #8f3f28);
}

.bl-series-team.loser .bl-series-name::after {
  position: absolute;
  top: 51%;
  right: -1px;
  left: -1px;
  height: 0;
  content: "";
  pointer-events: none;
  border-top: 2px solid color-mix(in srgb, #a84d30 82%, transparent);
  box-shadow: 0 1px 0 #fff8e866;
  transform: rotate(-1.6deg);
}

.bl-series-team.loser .bl-series-wins {
  color: #9b4a2d;
  opacity: .72;
}

/* How to Play is a printed program, not a stack of product callouts. The
 * information remains scannable, but uses ledger rules, ink, and paper rather
 * than the colored rail commonly associated with generic in-app notices. */
.how-panel {
  isolation: isolate;
  border: 3px double #4e3c27 !important;
  background:
    linear-gradient(90deg, transparent 0 38px, #684a2b16 38px 39px, transparent 39px),
    repeating-linear-gradient(0deg, transparent 0 23px, #5b422514 23px 24px),
    radial-gradient(circle at 22% 18%, #684a2b12 0 .7px, transparent .9px) 0 0 / 7px 7px,
    #fff8e8 !important;
  box-shadow: 5px 6px 0 #3c281866, 0 24px 54px #00000057 !important;
}

.how-panel::before {
  position: absolute;
  z-index: 0;
  top: 8px;
  right: 8px;
  bottom: 8px;
  left: 8px;
  content: "";
  pointer-events: none;
  border: 1px solid #684a2b66;
}

.how-panel-header {
  position: relative;
  padding: 3px 2px 13px !important;
}

.how-panel-header .eyebrow {
  letter-spacing: .18em;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .64rem;
}

.how-panel-close {
  border: 3px double #684a2b !important;
  background: #fff8e8b8 !important;
  box-shadow: inset 0 0 0 2px #fffdf4;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .67rem;
  letter-spacing: .12em;
}

.how-panel-close:hover,
.how-panel-close:focus-visible {
  color: #8f4a21;
  background: #ead9bd !important;
}

.how-intro,
.how-section p,
.how-feature p {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.62;
}

.how-intro {
  border-bottom: 1px solid #684a2b66;
  margin-top: 11px !important;
  padding: 0 2px 12px;
}

.how-steps {
  gap: 0 !important;
  margin: 15px 0 19px !important;
  border-top: 2px solid #684a2b;
  border-bottom: 2px solid #684a2b;
}

.how-steps li {
  grid-template-columns: 42px 82px 1fr;
  min-height: 48px !important;
  padding: 4px 5px;
}

.how-steps li::before {
  color: #8f4a21 !important;
  letter-spacing: .04em;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .82rem;
}

.how-steps strong {
  letter-spacing: .02em;
  font-size: 1.08rem;
}

.how-steps span {
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .72rem;
  font-weight: 600;
}

.how-feature {
  position: relative;
  border: 3px double #765338 !important;
  background:
    repeating-linear-gradient(0deg, #76533808 0 1px, transparent 1px 5px),
    #fffdf4b8 !important;
  gap: 7px;
  margin: 19px 0 8px !important;
  padding: 16px 17px 17px !important;
}

.how-feature::after {
  position: absolute;
  top: -10px;
  left: 13px;
  padding: 0 6px;
  content: "FIELD NOTE";
  color: #765338;
  background: #fff8e8;
  font: 800 .55rem/1 "Courier New", ui-monospace, monospace;
  letter-spacing: .16em;
}

.how-feature-eyebrow {
  color: #765338 !important;
  font-size: .58rem !important;
}

.how-feature h3 {
  font-size: 1.22rem;
}

.how-sections {
  gap: 0 !important;
  margin: 15px 0 !important;
  border-top: 2px solid #684a2b;
}

.how-section {
  position: relative;
  border-top: 0 !important;
  border-bottom: 1px solid #684a2b66;
  padding: 12px 2px 13px !important;
}

.how-section h3,
.how-modes-title {
  letter-spacing: .01em;
}

.how-modes-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 21px !important;
}

.how-modes-title::after {
  height: 1px;
  content: "";
  background: #684a2b88;
  flex: 1;
}

.how-section h3 .how-mode-tag {
  border: 2px double #9b7859 !important;
  border-radius: 0 !important;
  background: #fff8e899 !important;
  color: #765338 !important;
  padding: 2px 6px !important;
  font-size: .52rem;
  letter-spacing: .12em;
}

.how-solo-section {
  background: linear-gradient(90deg, #fff9ecaa, transparent 78%);
}

.how-mode-options {
  margin: 10px 0 1px;
  padding: 7px 9px 6px;
  border: 1px solid #8d6c4b88;
  background: #fff9ed66;
}

.how-mode-options p {
  margin: 0 0 7px !important;
}

.how-mode-options p:last-child {
  margin-bottom: 0 !important;
}

.how-mode-options strong {
  color: #55371f;
}

.how-mode-options em {
  color: #7f4b2a;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
}

.how-mode-options .how-solo-footnote {
  padding-top: 7px;
  border-top: 1px solid #8d6c4b55;
  font-size: .73rem;
}

.how-category-strip {
  border-top: 3px double #684a2b !important;
  color: #684a2b !important;
  padding: 11px 2px 1px !important;
  font-family: "Courier New", ui-monospace, monospace;
  font-size: .72rem;
  letter-spacing: .06em;
}

@media (width <= 760px) {
  .how-panel {
    padding: 17px !important;
  }

  .how-steps li {
    grid-template-columns: 36px 1fr;
    min-height: 52px !important;
  }

  .how-steps strong,
  .how-steps span {
    grid-column: 2;
  }
}