/* ===========================================================================
   rtp.css - READ THE PLAY, REBUILT (Sept 20)

   The thirty situations off the Fundamental Baseball chart, drawn to the
   same standard as The Duel: a lit board for a header, the field as the
   centerpiece and always whole on screen, every position wearing the number
   he wears on a scorecard, and every piece of reasoning in a card with a
   figure on it rather than in a paragraph.

   Loaded after style.css on every page. Every rule is scoped under .rtpx so
   nothing here reaches another page. The site's legibility layer uses
   attribute selectors with !important on anything named __label, __line,
   __text and so on, so the rules below that set their own type do it at a
   higher specificity and with !important of their own.
   =========================================================================== */

.body--defense .section-page.rtpx{ max-width: 1520px; }
.rtpx{
  --r-ball: var(--rtp-ball); --r-cutoff: var(--rtp-cutoff); --r-cover: var(--rtp-cover);
  --r-backup: var(--rtp-backup); --r-talk: var(--rtp-talk); --r-asked: #F2C14E; --r-idle: #6d7888;
  --board: linear-gradient(180deg, #0c1016, #121a24);
  --board-line: rgba(255,255,255,.12);
  --bulb: #F2C14E;
}
.rtpx > * + *{ margin-top: 18px !important; }
.rtpx [hidden]{ display: none !important; }
.rtpx-loading{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.6rem !important; text-transform: uppercase; color: var(--ink) !important; }

/* ---------------------------------------------------------------------------
   The lockup. One mark, the name, one line, and the switch.
   --------------------------------------------------------------------------- */
.rtpx-hero{
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 20px; border-radius: 18px; background: var(--board); border: 1px solid var(--board-line);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.rtpx-hero__brand{ display: flex; align-items: center; gap: 16px; min-width: 0; }
.rtpx-hero__mark{ width: 62px; height: 62px; flex: none; }
.rtpx-hero__mark svg{ width: 100%; height: 100%; display: block; }
.rtpx-hero__mark .m-field{ fill: #2c7546; stroke: rgba(255,255,255,.5); stroke-width: 1.5; }
.rtpx-hero__mark .m-bag{ fill: #F6F3EC; }
.rtpx-hero__mark .m-bag.is-lit{ fill: var(--bulb); filter: drop-shadow(0 0 4px rgba(242,193,78,.9)); }
.rtpx-hero__mark .m-throw{ stroke: var(--bulb); stroke-width: 2.4; stroke-dasharray: 3 3; fill: none; }
.rtpx-hero__mark .m-ball{ fill: #fff; stroke: #c4302b; stroke-width: 1.2; }
.rtpx-hero__words{ display: grid; gap: 6px; min-width: 0; }
.rtpx .rtpx-hero__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.2rem, 4vw, 3.1rem) !important; line-height: .9; color: #F6F3EC; letter-spacing: .01em !important; }
.rtpx .rtpx-hero__sub{ margin: 0; justify-self: start; font-family: var(--display-big) !important; font-weight: 900;
  font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .06em !important;
  padding: 4px 12px; border-radius: 999px; background: var(--bulb); color: #16121C !important; line-height: 1.2; }

/* the switch, a lit three-way segmented control */
.rtpx-seg{ display: flex; gap: 6px; padding: 6px; border-radius: 16px; background: rgba(0,0,0,.35); border: 1px solid var(--board-line); }
.rtpx-seg__btn{
  display: grid; justify-items: start; gap: 2px; min-width: 128px; padding: 10px 16px; border-radius: 12px; cursor: pointer;
  background: transparent; border: 1px solid transparent; color: #F6F3EC; text-align: left; transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.rtpx-seg__btn:hover{ background: rgba(255,255,255,.06); border-color: var(--board-line); }
.rtpx-seg__btn:active{ transform: translateY(1px); }
.rtpx-seg__btn.is-on{ background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 18px -6px var(--accent); }
.rtpx .rtpx-seg__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.45rem !important; text-transform: uppercase; line-height: 1; letter-spacing: .02em !important; }
.rtpx .rtpx-seg__note{ font-weight: 800; font-size: .92rem !important; text-transform: uppercase; letter-spacing: .06em !important; opacity: .8; }
@media (max-width: 720px){ .rtpx-seg{ width: 100%; } .rtpx-seg__btn{ flex: 1; min-width: 0; } }

/* ---------------------------------------------------------------------------
   Never Stand Still. Large, and next to it the five jobs counted for the
   play on screen, which is the creed stated as a fact about this play.
   --------------------------------------------------------------------------- */
.rtpx-creed{
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center;
  padding: 14px 20px; border-radius: 18px; border: 1px solid var(--accent-line);
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface) 70%);
}

.rtpx .rtpx-creed__big{ margin: 0; font-family: var(--display-big) !important; font-weight: 900; text-transform: uppercase !important;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem) !important; line-height: .88; letter-spacing: .01em !important; color: var(--ink) !important; }
.rtpx .rtpx-creed__line{ margin: 6px 0 0; font-weight: 800 !important; font-size: 1.08rem !important; color: var(--ink) !important; }
.rtpx-roles{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 520px){ .rtpx-roles{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rtpx-role{
  --c: var(--accent); display: grid; justify-items: center; gap: 2px; min-width: 0; padding: 8px 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-top: 4px solid var(--c); color: var(--ink); cursor: pointer; transition: transform .12s ease, background .15s ease;
}
button.rtpx-role:hover{ transform: translateY(-2px); }
.rtpx-role.is-on{ background: color-mix(in srgb, var(--c) 42%, var(--surface-2)); box-shadow: 0 0 0 2px var(--c); }
.rtpx-role.is-zero{ opacity: .38; }
.rtpx-role--ball{ --c: var(--r-ball); } .rtpx-role--cutoff{ --c: var(--r-cutoff); } .rtpx-role--cover{ --c: var(--r-cover); }
.rtpx-role--backup{ --c: var(--r-backup); } .rtpx-role--talk{ --c: var(--r-talk); }
.rtpx-role--all{ --c: var(--bulb); cursor: default; background: var(--board); }
.rtpx .rtpx-role__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 2rem !important; line-height: 1; }
.rtpx .rtpx-role__label{ font-weight: 800 !important; font-size: .86rem !important; text-transform: uppercase; letter-spacing: .03em !important; white-space: nowrap; font-family: var(--body) !important; }
.rtpx-role--all .rtpx-role__n{ color: var(--bulb); }

/* ---------------------------------------------------------------------------
   The body: the field on the left, always whole on screen, and everything
   you read on the right. The field column sticks under the header, so while
   you read down the nine jobs the play stays in view.
   --------------------------------------------------------------------------- */
.rtpx-body{ display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 18px; align-items: start; margin-top: 16px; }
@media (max-width: 1020px){ .rtpx-body{ grid-template-columns: 1fr; } }
.rtpx-col{ display: grid; gap: 12px; min-width: 0; }
.rtpx-col--field{ position: sticky; top: 78px; justify-items: center; }
@media (max-width: 1020px){ .rtpx-col--field{ position: static; } }

/* THE FIELD FITS THE SCREEN. Its width is worked out from the height left
   under the header and the transport, at the drawing's own aspect ratio, so
   the whole diamond and the Run the Play row are visible together. */
.rtpx .rtpx-field{
  position: relative; width: min(100%, calc((100vh - 300px) * 1.097)); max-width: 100%;
  border-radius: 18px; border: 1px solid var(--board-line); overflow: hidden; background: var(--dm-void-near);
  box-shadow: 0 16px 36px rgba(0,0,0,.4); margin: 0;
}
.rtpx .rtpx-field .rtp-svg{ display: block; width: 100%; height: auto; }

/* broadcast corners */
.rtpx-corner{ position: absolute; top: 12px; display: flex; align-items: center; gap: 10px; pointer-events: none;
  padding: 8px 12px; border-radius: 12px; background: rgba(8,12,18,.78); border: 1px solid var(--board-line); backdrop-filter: blur(6px); }
.rtpx-corner--left{ left: 12px; }
.rtpx-corner--right{ right: 12px; }
.rtpx .rtpx-corner__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 2rem !important; line-height: 1; color: var(--bulb); }
.rtpx-corner__words{ display: grid; gap: 1px; }
.rtpx .rtpx-corner__hit{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.25rem !important; text-transform: uppercase; color: #F6F3EC; line-height: 1; }
.rtpx .rtpx-corner__where{ font-weight: 800; font-size: .95rem !important; color: rgba(246,243,236,.85); text-transform: uppercase; letter-spacing: .04em; }
.rtpx-corner .rtpx-bases{ width: 38px; height: 38px; }
.rtpx .rtpx-corner__bases{ font-weight: 800; font-size: 1rem !important; color: #F6F3EC; white-space: nowrap; }
.rtpx .rtpx-corner__outs{ font-weight: 800; font-size: .9rem !important; color: var(--bulb); white-space: nowrap; }
@media (max-width: 640px){ .rtpx-corner{ padding: 5px 8px; gap: 6px; } .rtpx .rtpx-corner__n{ font-size: 1.4rem !important; } .rtpx .rtpx-corner__hit{ font-size: 1rem !important; } .rtpx-corner__where, .rtpx-corner__bases{ display: none; } }

/* bases glyphs, wherever they appear */
.rtpx-bases, .rtpx-chip__bases, .rtpx-tile__bases, .rtpx-ask__bases{ display: block; flex: none; }
.rtpx-bases__field, .rtpx-chip__bases .rtpx-bases__field, .rtpx-tile__bases .rtpx-bases__field, .rtpx-ask__bases .rtpx-bases__field{ fill: rgba(255,255,255,.06); stroke: rgba(255,255,255,.35); stroke-width: 2; }
.rtpx-bases__bag{ fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.55); stroke-width: 2; }
.rtpx-bases__bag.is-on{ fill: var(--bulb); stroke: var(--bulb); filter: drop-shadow(0 0 3px rgba(242,193,78,.8)); }
.rtpx-bases__plate{ fill: #F6F3EC; }

/* the men on the field, lettered with their scorecard numbers */
.rtpx .rtpx-man-num{ font-family: var(--display-big); font-weight: 900; font-size: 17px; fill: #fff; }
.rtpx .rtp-man-disc{ fill: #0c1119; }
.rtpx .rtp-man-ring{ stroke-width: 3.2; fill: none; }
.rtpx .rtp-man--asked .rtp-man-ring{ stroke: var(--r-asked); stroke-width: 4; }
.rtpx .rtp-man--asked .rtp-man-halo{ fill: var(--r-asked); opacity: .38; }
.rtpx .rtp-man--asked .rtp-man-disc{ fill: #2a1f05; }
.rtpx .rtp-man--asked .rtpx-man-num{ fill: var(--r-asked); }
.rtpx .rtp-man--idle{ opacity: .72; }
.rtpx .rtp-man--drag{ cursor: grab; }
.rtpx .rtp-man--drag:not(.is-dragging) .rtp-man-halo{ animation: rtpx-beckon 1.4s ease-in-out infinite; }
@keyframes rtpx-beckon{ 0%,100%{ opacity: .15; } 50%{ opacity: .55; } }
.rtpx .rtp-man, .rtpx .rtp-path{ transition: opacity .2s ease; }

/* the throw, drawn on the grass */
.rtpx-throwline{ stroke: var(--bulb); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0; transition: opacity .4s ease; }
.rtpx-throwline.is-alt{ stroke: rgba(246,243,236,.7); }
.rtpx-field.is-settled .rtpx-throwline, .rtpx-field.is-playing .rtpx-throwline{ opacity: .9; }

/* one job at a time: pressing a role tile, or a man, fades the rest */
.rtpx-field[data-role="ball"] .rtp-man:not(.rtp-man--ball),
.rtpx-field[data-role="cutoff"] .rtp-man:not(.rtp-man--cutoff),
.rtpx-field[data-role="cover"] .rtp-man:not(.rtp-man--cover),
.rtpx-field[data-role="backup"] .rtp-man:not(.rtp-man--backup),
.rtpx-field[data-role="talk"] .rtp-man:not(.rtp-man--talk){ opacity: .18; }
.rtpx-field[data-role="ball"] .rtp-path:not(.rtp-path--ball),
.rtpx-field[data-role="cutoff"] .rtp-path:not(.rtp-path--cutoff),
.rtpx-field[data-role="cover"] .rtp-path:not(.rtp-path--cover),
.rtpx-field[data-role="backup"] .rtp-path:not(.rtp-path--backup),
.rtpx-field[data-role="talk"] .rtp-path:not(.rtp-path--talk){ opacity: .1; }
.rtpx-field[data-only="P"] .rtp-man:not([data-pos="P"]), .rtpx-field[data-only="C"] .rtp-man:not([data-pos="C"]),
.rtpx-field[data-only="1B"] .rtp-man:not([data-pos="1B"]), .rtpx-field[data-only="2B"] .rtp-man:not([data-pos="2B"]),
.rtpx-field[data-only="SS"] .rtp-man:not([data-pos="SS"]), .rtpx-field[data-only="3B"] .rtp-man:not([data-pos="3B"]),
.rtpx-field[data-only="LF"] .rtp-man:not([data-pos="LF"]), .rtpx-field[data-only="CF"] .rtp-man:not([data-pos="CF"]),
.rtpx-field[data-only="RF"] .rtp-man:not([data-pos="RF"]){ opacity: .22; }
.rtpx-field[data-only="P"] .rtp-path:not([data-pos="P"]), .rtpx-field[data-only="C"] .rtp-path:not([data-pos="C"]),
.rtpx-field[data-only="1B"] .rtp-path:not([data-pos="1B"]), .rtpx-field[data-only="2B"] .rtp-path:not([data-pos="2B"]),
.rtpx-field[data-only="SS"] .rtp-path:not([data-pos="SS"]), .rtpx-field[data-only="3B"] .rtp-path:not([data-pos="3B"]),
.rtpx-field[data-only="LF"] .rtp-path:not([data-pos="LF"]), .rtpx-field[data-only="CF"] .rtp-path:not([data-pos="CF"]),
.rtpx-field[data-only="RF"] .rtp-path:not([data-pos="RF"]){ opacity: .08; }

/* the question rings */
.rtpx .rtpx-zone .rtp-zone-ring{ fill: rgba(242,193,78,.12); stroke: var(--bulb); stroke-width: 3; stroke-dasharray: 6 5; }
.rtpx .rtpx-zone:hover .rtp-zone-ring{ fill: rgba(242,193,78,.3); }
.rtpx .rtpx-zone-badge{ fill: var(--bulb); stroke: #16121C; stroke-width: 2; }
.rtpx .rtpx-zone-num{ font-family: var(--display-big); font-weight: 900; font-size: 15px; fill: #16121C; pointer-events: none; }
.rtpx .rtpx-zone.is-right .rtp-zone-ring{ fill: rgba(70,229,138,.35); stroke: #46e58a; stroke-dasharray: none; }
.rtpx .rtpx-zone.is-right .rtpx-zone-badge{ fill: #46e58a; }
.rtpx .rtpx-zone.is-wrong .rtp-zone-ring{ fill: rgba(255,111,95,.3); stroke: #ff6f5f; stroke-dasharray: none; }
.rtpx .rtpx-zone.is-wrong .rtpx-zone-badge{ fill: #ff6f5f; }
.rtpx .rtpx-zone.is-dim{ opacity: .3; }
.rtpx-field[data-state="right"]{ box-shadow: 0 0 0 3px #46e58a, 0 16px 36px rgba(0,0,0,.4); }
.rtpx-field[data-state="wrong"]{ box-shadow: 0 0 0 3px #ff6f5f, 0 16px 36px rgba(0,0,0,.4); }

/* ---------------------------------------------------------------------------
   The transport under the field
   --------------------------------------------------------------------------- */
.rtpx-transport{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: min(100%, calc((100vh - 300px) * 1.097)); }
/* Once the page has scrolled the lockup away the field has more room, and it
   takes it: sticky under the header it can be as tall as the window allows. */
@media (min-width: 1021px){
  .rtpx-col--field .rtpx-field, .rtpx-col--field .rtpx-transport{ width: min(100%, calc((100vh - 170px) * 1.097)); }
  .rtpx-learn .rtpx-col--field .rtpx-field, .rtpx-learn .rtpx-col--field .rtpx-transport,
  .rtpx-qbody .rtpx-col--field .rtpx-field{ width: min(100%, calc((100vh - 290px) * 1.097)); }
}
.rtpx-play{
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px 11px 16px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border: 0;
  font-family: var(--display-big); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 8px 20px -8px var(--accent); transition: transform .1s ease, filter .15s ease;
}
.rtpx-play svg{ width: 22px; height: 22px; }
.rtpx-play:hover{ filter: brightness(1.08); }
.rtpx-play:active{ transform: translateY(1px); }
.rtpx-toggle, .rtpx-stepbtn, .rtpx-btn{
  padding: 10px 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: var(--display-big); font-weight: 900; font-size: 1.08rem; text-transform: uppercase; letter-spacing: .03em; line-height: 1;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.rtpx-toggle:hover, .rtpx-stepbtn:hover, .rtpx-btn:hover{ border-color: var(--accent); }
.rtpx-toggle:active, .rtpx-stepbtn:active, .rtpx-btn:active{ transform: translateY(1px); }
.rtpx-toggle.is-on{ background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.rtpx-btn--go{ background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border-color: var(--accent); }
.rtpx-scrub{ flex: 1 1 140px; min-width: 120px; accent-color: var(--accent); height: 6px; }
.rtpx-step{ display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.rtpx .rtpx-step__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.2rem !important; color: var(--ink); min-width: 78px; text-align: center; }

/* ---------------------------------------------------------------------------
   Cards on the right
   --------------------------------------------------------------------------- */
.rtpx-card{ padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 12px; min-width: 0; }
.rtpx .rtpx-card__title, .rtpx .rtpx-section__title{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; text-transform: uppercase;
  font-size: 1.6rem !important; line-height: 1; letter-spacing: .01em !important; color: var(--ink) !important; }
.rtpx .rtpx-section__title{ font-size: clamp(1.8rem, 3vw, 2.3rem) !important; margin-bottom: 12px; }

/* Build the Situation */
.rtpx-build{ border-top: 4px solid var(--accent); }
.rtpx-pick{ display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: center; }
@media (max-width: 520px){ .rtpx-pick{ grid-template-columns: 1fr; } }
.rtpx .rtpx-pick__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .04em !important; color: var(--ink-soft); }
.rtpx-pick__opts{ display: flex; flex-wrap: wrap; gap: 6px; }
.rtpx-chip{
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-weight: 800; font-size: 1rem; line-height: 1.1;
  transition: border-color .15s ease, background .15s ease;
}
.rtpx-chip:hover{ border-color: var(--accent); }
.rtpx-chip.is-on{ background: linear-gradient(180deg, var(--accent-hot), var(--accent)); color: var(--accent-ink); border-color: var(--accent); }
.rtpx-chip__bases{ width: 20px; height: 20px; }
.rtpx-chip.is-on .rtpx-bases__bag:not(.is-on){ fill: rgba(0,0,0,.2); stroke: rgba(0,0,0,.4); }
.rtpx-chip.is-on .rtpx-bases__field{ stroke: rgba(0,0,0,.4); }

/* What Happened */
.rtpx-context{ border-left: 5px solid var(--bulb); }
.rtpx-context__head{ display: flex; align-items: center; gap: 14px; }
.rtpx .rtpx-context__n{ flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--board);
  border: 1px solid var(--board-line); font-family: var(--display-big) !important; font-weight: 900; font-size: 2rem !important; color: var(--bulb); }
.rtpx-context__hw{ display: grid; gap: 4px; min-width: 0; }
.rtpx .rtpx-context__title{ margin: 0; font-weight: 800 !important; font-size: 1.15rem !important; color: var(--ink) !important; line-height: 1.25; }
.rtpx .rtpx-context__lead{ margin: 0; font-weight: 700 !important; font-size: 1.1rem !important; line-height: 1.4; color: var(--ink) !important; }
.rtpx-context__row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: stretch; }
@media (max-width: 560px){ .rtpx-context__row{ grid-template-columns: 1fr; } }
.rtpx-context__throw{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); min-width: 0; }
.rtpx-context__throw .rtpx-fact__label{ color: var(--bulb) !important; }

/* the scorer's throw: numbered chips with the distance over each arrow */
.rtpx-throw{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rtpx-throw__man{ display: grid; justify-items: center; gap: 3px; transition: opacity .2s ease; }
.rtpx-throw__man.is-dim{ opacity: .35; }
.rtpx-throw__man.is-lit .rtpx-num{ box-shadow: 0 0 0 3px var(--bulb), 0 0 16px rgba(242,193,78,.7); }
.rtpx .rtpx-throw__pos{ font-weight: 900; font-size: .92rem !important; color: #F6F3EC; letter-spacing: .04em; }
.rtpx-throw__leg{ display: grid; justify-items: center; gap: 0; min-width: 56px; }
.rtpx .rtpx-throw__ft{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; color: #F6F3EC; line-height: 1; white-space: nowrap; }
.rtpx-throw__arrow{ width: 56px; height: 14px; }
.rtpx-throw__arrow path{ fill: none; stroke: var(--bulb); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* number discs, colored by the man's job */
.rtpx-num{
  --c: var(--r-idle); display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: #0c1119; border: 3px solid var(--c); color: #fff; font-family: var(--display-big); font-weight: 900; font-size: 1.25rem; line-height: 1;
}
.rtpx-num--ball{ --c: var(--r-ball); } .rtpx-num--cutoff{ --c: var(--r-cutoff); } .rtpx-num--cover{ --c: var(--r-cover); }
.rtpx-num--backup{ --c: var(--r-backup); } .rtpx-num--talk{ --c: var(--r-talk); }
.rtpx-num--asked{ --c: var(--r-asked); color: var(--r-asked); background: #2a1f05; }
.rtpx-num--lg{ width: 46px; height: 46px; font-size: 1.5rem; }
.rtpx-num--xl{ width: 64px; height: 64px; font-size: 2.1rem; border-width: 4px; }

/* figure and fact cards, the unit every panel is built from */
.rtpx-figure{ display: grid; align-content: center; gap: 3px; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); border-top: 4px solid var(--bulb); min-width: 140px; }
.rtpx .rtpx-figure__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 2.4rem !important; line-height: .9; color: var(--ink); }
.rtpx .rtpx-figure__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .03em !important; color: var(--bulb) !important; }
.rtpx .rtpx-figure__line{ font-weight: 700 !important; font-size: .98rem !important; color: var(--ink-soft) !important; line-height: 1.3; }
.rtpx-facts{ display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rtpx-fact{ display: grid; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 4px solid var(--accent); }
.rtpx-fact--decide{ border-left-color: #46e58a; }
.rtpx-fact--wrong{ border-left-color: #ff6f5f; }
.rtpx-fact--spot{ border-left-color: var(--bulb); }
.rtpx .rtpx-fact__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.08rem !important; text-transform: uppercase; letter-spacing: .03em !important; color: var(--ink) !important; }
.rtpx-fact--decide .rtpx-fact__label{ color: #46e58a !important; }
.rtpx-fact--wrong .rtpx-fact__label{ color: #ff8a7d !important; }
.rtpx .rtpx-fact__text{ margin: 0; font-weight: 700 !important; font-size: 1.04rem !important; line-height: 1.38; color: var(--ink) !important; }

/* the nine jobs */
.rtpx-nine{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.rtpx-job{
  --c: var(--accent); display: grid; gap: 8px; align-content: start; text-align: left; padding: 11px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--c); color: var(--ink);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.rtpx-job:hover{ transform: translateY(-2px); border-color: var(--c); }
.rtpx-job.is-on{ background: color-mix(in srgb, var(--c) 20%, var(--surface)); box-shadow: 0 0 0 2px var(--c); }
.rtpx-job--ball{ --c: var(--r-ball); } .rtpx-job--cutoff{ --c: var(--r-cutoff); } .rtpx-job--cover{ --c: var(--r-cover); }
.rtpx-job--backup{ --c: var(--r-backup); } .rtpx-job--talk{ --c: var(--r-talk); }
.rtpx-job__head{ display: flex; align-items: center; gap: 10px; }
.rtpx-job__who{ display: grid; gap: 1px; }
.rtpx .rtpx-job__pos{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.35rem !important; line-height: 1; }
.rtpx .rtpx-job__role{ font-weight: 900; font-size: .9rem !important; text-transform: uppercase; letter-spacing: .06em; color: var(--c); }
.rtpx .rtpx-job__headline{ font-weight: 800 !important; font-size: 1.02rem !important; line-height: 1.25; color: var(--ink) !important; }

/* one man's job, when he is picked */
.rtpx-pos{ display: grid; gap: 12px; }
.rtpx-pos__head{ display: flex; align-items: center; gap: 14px; }
.rtpx-pos__hw{ display: grid; gap: 4px; min-width: 0; flex: 1; }
.rtpx .rtpx-pos__name{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.5rem !important; text-transform: uppercase; line-height: 1; color: var(--ink); }
.rtpx .rtpx-pos__headline{ font-weight: 900 !important; font-size: 1.15rem !important; line-height: 1.2; }
.rtpx-ink--ball{ color: var(--r-ball); } .rtpx-ink--cutoff{ color: var(--r-cutoff); } .rtpx-ink--cover{ color: var(--r-cover); }
.rtpx-ink--backup{ color: var(--r-backup); } .rtpx-ink--talk{ color: var(--r-talk); }
.rtpx .rtpx-pos__text{ margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 800 !important; font-size: 1.08rem !important; line-height: 1.4; color: var(--ink) !important; }
.rtpx-pos__figs{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.rtpx-pos__throw{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); }
.rtpx-pos__throw .rtpx-fact__label{ color: var(--bulb) !important; }
.rtpx-pos__close{ flex: none; }
.rtpx-pos__close{ padding: 8px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink);
  font-family: var(--display-big); font-weight: 900; font-size: 1rem; text-transform: uppercase; }
.rtpx-pos__close:hover{ border-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Tips, and all thirty
   --------------------------------------------------------------------------- */
.rtpx-tips, .rtpx-chart, .rtpx-yours, .rtpx-missed{ margin-top: 26px; }
.rtpx-tips__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.rtpx-tip{ display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.rtpx .rtpx-tip__n{ grid-row: span 2; font-family: var(--display-big) !important; font-weight: 900; font-size: 2.2rem !important; line-height: .9; color: var(--accent); }
.rtpx .rtpx-tip__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.2rem !important; text-transform: uppercase; letter-spacing: .02em !important; color: var(--ink) !important; }
.rtpx .rtpx-tip__text{ margin: 0; font-weight: 700 !important; font-size: 1.02rem !important; line-height: 1.35; color: var(--ink-soft) !important; }

.rtpx-chart__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rtpx-tile{
  position: relative; display: grid; gap: 2px; text-align: left; padding: 10px 12px 12px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: transform .12s ease, border-color .15s ease;
}
.rtpx-tile:hover{ transform: translateY(-2px); border-color: var(--accent); }
.rtpx-tile.is-on{ border-color: var(--bulb); box-shadow: 0 0 0 2px var(--bulb); background: color-mix(in srgb, var(--bulb) 10%, var(--surface)); }
.rtpx-tile.is-seen::after{ content: ""; position: absolute; top: 10px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: #46e58a; }
.rtpx .rtpx-tile__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.9rem !important; line-height: 1; color: var(--accent); }
.rtpx .rtpx-tile__hit{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.1rem !important; text-transform: uppercase; line-height: 1; }
.rtpx .rtpx-tile__where{ font-weight: 800; font-size: .92rem !important; color: var(--ink-soft); }
.rtpx-tile__bases{ position: absolute; right: 10px; bottom: 10px; width: 26px; height: 26px; }

/* ---------------------------------------------------------------------------
   Questions: Quiz and Today
   --------------------------------------------------------------------------- */
.rtpx-scoreboard{ display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: 18px; background: var(--board); border: 1px solid var(--board-line); box-shadow: 0 14px 34px rgba(0,0,0,.35); }
.rtpx-sb__cell{ display: grid; justify-items: center; gap: 4px; min-width: 96px; padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,.05); }
.rtpx .rtpx-sb__label{ font-weight: 800 !important; font-size: .95rem !important; text-transform: uppercase; letter-spacing: .06em !important; color: rgba(246,243,236,.85); }
.rtpx .rtpx-sb__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 2.3rem !important; line-height: 1; color: #FFE7A3; }
.rtpx-sb__cell--streak{ flex: 1; min-width: 220px; }
.rtpx-sb__bulbs{ display: flex; gap: 6px; }
.rtpx-sb__bulbs i{ width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.22); }
.rtpx-sb__bulbs i.is-on{ background: var(--bulb); border-color: var(--bulb); box-shadow: 0 0 10px rgba(242,193,78,.8); }
.rtpx .rtpx-qhint{ margin: 0; font-weight: 800 !important; font-size: 1.02rem !important; color: var(--ink) !important; text-align: center; }

.rtpx-ask{ border-top: 5px solid var(--r-asked); background: linear-gradient(170deg, color-mix(in srgb, var(--r-asked) 14%, var(--surface)), var(--surface) 60%); }
.rtpx-ask__top{ display: flex; align-items: center; gap: 14px; }
.rtpx-ask__tw{ display: grid; gap: 4px; }
.rtpx .rtpx-ask__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.05rem !important; text-transform: uppercase; letter-spacing: .05em !important; color: var(--r-asked) !important; }
.rtpx .rtpx-ask__q{ margin: 0; font-family: var(--display-big) !important; font-weight: 900 !important; font-size: clamp(1.8rem, 2.6vw, 2.3rem) !important; text-transform: uppercase; line-height: .95; color: var(--ink) !important; }
.rtpx-ask__sit{ display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--board); border: 1px solid var(--board-line); }
.rtpx-ask__bases{ width: 46px; height: 46px; }
.rtpx-ask__sw{ display: grid; gap: 2px; }
.rtpx .rtpx-ask__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1rem !important; text-transform: uppercase; color: var(--bulb); letter-spacing: .04em; }
.rtpx .rtpx-ask__title{ margin: 0; font-weight: 800 !important; font-size: 1.1rem !important; color: #F6F3EC !important; line-height: 1.25; }

.rtpx-options{ display: grid; gap: 8px; }
.rtpx-option{
  display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 2px solid var(--line); color: var(--ink); transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.rtpx-option:hover:not(:disabled){ transform: translateX(3px); border-color: var(--bulb); }
.rtpx-option:disabled{ cursor: default; }
.rtpx .rtpx-option__n{ flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bulb); color: #16121C;
  font-family: var(--display-big) !important; font-weight: 900; font-size: 1.4rem !important; }
.rtpx-option__words{ display: grid; gap: 2px; min-width: 0; }
.rtpx .rtpx-option__label{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.25rem !important; text-transform: uppercase; letter-spacing: .02em !important; color: var(--ink) !important; line-height: 1.05; }
.rtpx .rtpx-option__src{ font-weight: 700; font-size: .98rem !important; color: var(--ink-soft); }
.rtpx-option.is-right{ border-color: #46e58a; background: rgba(70,229,138,.14); }
.rtpx-option.is-right .rtpx-option__n{ background: #46e58a; }
.rtpx-option.is-wrong{ border-color: #ff6f5f; background: rgba(255,111,95,.12); }
.rtpx-option.is-wrong .rtpx-option__n{ background: #ff6f5f; }
.rtpx-option.is-dim{ opacity: .5; }

.rtpx-verdict{ border-top: 6px solid var(--line); animation: rtpx-pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes rtpx-pop{ from{ transform: scale(.97); opacity: .3; } to{ transform: none; opacity: 1; } }
.rtpx-verdict.is-right{ border-top-color: #46e58a; background: linear-gradient(170deg, rgba(70,229,138,.14), var(--surface) 55%); }
.rtpx-verdict.is-wrong{ border-top-color: #ff6f5f; background: linear-gradient(170deg, rgba(255,111,95,.14), var(--surface) 55%); }
.rtpx-verdict__call{ display: grid; gap: 4px; }
.rtpx .rtpx-verdict__big{ font-family: var(--display-big) !important; font-weight: 900; font-size: clamp(2.2rem, 3.4vw, 3rem) !important; text-transform: uppercase; line-height: .9; }
.rtpx-verdict.is-right .rtpx-verdict__big{ color: #46e58a; }
.rtpx-verdict.is-wrong .rtpx-verdict__big{ color: #ff8a7d; }
.rtpx .rtpx-verdict__sub{ font-weight: 800 !important; font-size: 1.05rem !important; color: var(--ink) !important; }
.rtpx-verdict__row{ display: flex; flex-wrap: wrap; gap: 8px; }

.rtpx-missed__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.rtpx-miss{ display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #ff6f5f; color: var(--ink); }
.rtpx-miss:hover{ border-color: #ff6f5f; }
.rtpx-miss__w{ display: grid; gap: 2px; flex: 1; min-width: 0; }
.rtpx .rtpx-miss__who{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.15rem !important; text-transform: uppercase; line-height: 1; }
.rtpx .rtpx-miss__t{ font-weight: 700; font-size: .95rem !important; color: var(--ink-soft); }
.rtpx .rtpx-miss__x{ flex: none; font-weight: 900; font-size: .92rem !important; padding: 4px 10px; border-radius: 999px; background: rgba(255,111,95,.2); color: #ff8a7d; }

/* Today */
.rtpx-todayhead{ grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; border-top: 5px solid var(--bulb); }
@media (max-width: 900px){ .rtpx-todayhead{ grid-template-columns: 1fr; } }
.rtpx-todayhead__date{ display: grid; gap: 2px; padding: 10px 16px; border-radius: 14px; background: var(--board); border: 1px solid var(--board-line); text-align: center; }
.rtpx .rtpx-todayhead__dow{ font-weight: 900; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--bulb); }
.rtpx .rtpx-todayhead__day{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.8rem !important; line-height: 1; color: #F6F3EC; text-transform: uppercase; white-space: nowrap; }
.rtpx-todayhead__pick{ display: grid; gap: 8px; min-width: 0; }
.rtpx-posrow{ gap: 6px; }
.rtpx-poschip{ padding: 6px 12px 6px 6px; }
.rtpx .rtpx-poschip__n{ display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #0c1119; color: #fff; font-family: var(--display-big); font-weight: 900; font-size: 1rem; }
.rtpx-poschip:not(:has(.rtpx-poschip__n)){ padding-left: 13px; }
.rtpx-todayhead__status .rtpx-figure{ min-width: 180px; }

.rtpx-yours__sum{ display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rtpx-yours__sum .rtpx-role{ cursor: default; }
.rtpx-yours__grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.rtpx-ytile{
  --c: var(--accent); display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-left: 5px solid var(--c); color: var(--ink);
  transition: transform .12s ease;
}
.rtpx-ytile:hover{ transform: translateY(-2px); }
.rtpx-ytile--ball{ --c: var(--r-ball); } .rtpx-ytile--cutoff{ --c: var(--r-cutoff); } .rtpx-ytile--cover{ --c: var(--r-cover); }
.rtpx-ytile--backup{ --c: var(--r-backup); } .rtpx-ytile--talk{ --c: var(--r-talk); }
.rtpx .rtpx-ytile__n{ font-family: var(--display-big) !important; font-weight: 900; font-size: 1.5rem !important; line-height: 1; color: var(--c); }
.rtpx .rtpx-ytile__job{ font-weight: 800; font-size: 1rem !important; line-height: 1.2; }

/* Reduced motion keeps the page, drops the flourishes */
@media (prefers-reduced-motion: reduce){
  .rtpx .rtp-man--drag .rtp-man-halo{ animation: none; }
  .rtpx-verdict{ animation: none; }
}

/* the throw stays on one line: a scorer's notation is read left to right */
.rtpx-context__row{ grid-template-columns: minmax(0, 1fr) minmax(130px, 168px); }
.rtpx-throw{ flex-wrap: nowrap; gap: 2px; }
.rtpx-throw__leg{ min-width: 42px; flex: 1 1 42px; max-width: 70px; }
.rtpx-throw__arrow{ width: 100%; }
.rtpx-context__row .rtpx-figure{ min-width: 0; }
.rtpx .rtpx-context__row .rtpx-figure__n{ font-size: 2.6rem !important; }
@media (max-width: 560px){ .rtpx-context__row{ grid-template-columns: 1fr; } }

/* the quiz board is compact so the question field fits under it */
.rtpx-scoreboard{ padding: 8px; gap: 6px; }
.rtpx-sb__cell{ padding: 6px 12px; min-width: 84px; }
.rtpx .rtpx-sb__n{ font-size: 1.9rem !important; }
@media (min-width: 1021px){
  .rtpx-qbody .rtpx-col--field .rtpx-field{ width: min(100%, calc((100vh - 350px) * 1.097)); }
  .rtpx-today .rtpx-qbody .rtpx-col--field .rtpx-field{ width: min(100%, calc((100vh - 330px) * 1.097)); }
}
.rtpx-col--read .rtpx-todayhead{ grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
.rtpx-col--read .rtpx-todayhead__pick{ grid-column: 1 / -1; grid-row: 2; }
.rtpx-col--read .rtpx-todayhead__status .rtpx-figure{ min-width: 0; }
.rtpx-today .rtpx-qbody{ margin-top: 0; }
@media (min-width: 1021px){
  .rtpx-today .rtpx-qbody .rtpx-col--field .rtpx-field{ width: min(100%, calc((100vh - 250px) * 1.097)); }
}