/* THE PIT — room styles. Every rule scoped under #screen-pit. */

#screen-pit .pt-room {
  max-width: 30rem;
  margin: 0 auto;
  padding: 0.4rem 0.4rem 2rem;
}

/* ---------- head / the Bookmaker ---------- */
#screen-pit .pt-head { margin-bottom: 0.3rem; }
#screen-pit .pt-head .label { font-size: 0.8rem; letter-spacing: 0.34em; }
#screen-pit .pt-keeper {
  min-height: 2.1rem;
  margin: 0.25rem auto 0;
  max-width: 26rem;
  font-size: 0.86rem;
  color: var(--bone);
  transition: opacity 0.3s ease;
}

/* ---------- HUD ---------- */
#screen-pit .pt-hud {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  padding: 0.3rem 0 0.5rem;
  border-bottom: 1px dashed rgba(216, 180, 90, 0.18);
  margin-bottom: 0.6rem;
}
#screen-pit .pt-purse { font-size: 1.2rem; }
#screen-pit .pt-flag { color: var(--gold-dim); }

/* the Bookmaker's slate: three silhouette marks */
#screen-pit .pt-markwrap {
  display: inline-flex;
  gap: 0.32rem;
  padding: 0.22rem 0.4rem;
  background: #11100d;
  border: 1px solid #2e2a22;
  border-radius: 2px;
}
#screen-pit .pt-mark {
  width: 0.5rem;
  height: 0.72rem;
  border-radius: 45% 45% 22% 22%;
  background: #1d1a14;
  border: 1px solid #2e2a22;
  transition: background 0.5s, box-shadow 0.5s;
}
#screen-pit .pt-mark.chalked {
  background: linear-gradient(180deg, #e8e4d7, #b8b2a0);
  box-shadow: 0 0 7px rgba(232, 228, 215, 0.5);
}
#screen-pit .pt-markwrap.full {
  border-color: var(--red);
  box-shadow: 0 0 10px rgba(168, 54, 46, 0.45);
}

/* ---------- coach ---------- */
#screen-pit .pt-coach {
  margin: 0.2rem auto 0.55rem;
  max-width: 24rem;
  font-size: 0.78rem;
  font-style: italic;
  color: #9a937e;
  border-left: 2px solid var(--gold-dim);
  padding-left: 0.6rem;
  text-align: left;
}

/* ---------- the card ---------- */
#screen-pit .pt-card {
  border: 1px solid #34230f;
  background:
    radial-gradient(circle at 50% -30%, rgba(216, 180, 90, 0.07), transparent 55%),
    linear-gradient(170deg, #14100a, #0c0a07);
  border-radius: 4px;
  padding: 0.7rem 0.55rem 0.8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}
#screen-pit .pt-cardhead {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--gold-dim);
  margin-bottom: 0.55rem;
}
#screen-pit .pt-card.housecard { border-color: #4a1714; }
#screen-pit .pt-card.housecard .pt-cardhead { color: #a8584f; }

#screen-pit .pt-fighters {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
}
#screen-pit .pt-vs {
  align-self: center;
  font-style: italic;
  color: #6b6353;
  font-size: 0.95rem;
  padding: 0 0.1rem;
}
#screen-pit .pt-corner {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.5rem 0.4rem;
  border: 1px solid #2c2415;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
}
#screen-pit .pt-corner.house {
  border-color: #471a16;
  background: rgba(20, 5, 4, 0.4);
}
#screen-pit .pt-fname {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--bone);
  min-height: 2.1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screen-pit .pt-corner.house .pt-fname { color: #c98e86; letter-spacing: 0.3em; }

/* tells — each word has a visual twin */
#screen-pit .pt-tells { display: flex; flex-direction: column; gap: 0.34rem; }
#screen-pit .pt-tell {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  text-align: left;
}
#screen-pit .pt-tellword { font-size: 0.72rem; line-height: 1.25; }
#screen-pit .pt-glyph {
  flex: 0 0 1.7rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

/* the gait: three stride dots, pace and steadiness per band */
#screen-pit .pt-g-gait i {
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #8d8470;
  animation: pt-stride 1.1s linear infinite;
}
#screen-pit .pt-g-gait i:nth-child(2) { animation-delay: 0.18s; }
#screen-pit .pt-g-gait i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pt-stride {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
#screen-pit .pt-t-gait[data-band='prowl'] i { animation-duration: 0.7s; background: #cfc9b8; }
#screen-pit .pt-t-gait[data-band='steady'] i { animation-duration: 1.1s; }
#screen-pit .pt-t-gait[data-band='wide'] i { animation-duration: 1.7s; }
#screen-pit .pt-t-gait[data-band='drag'] i { animation-duration: 2.6s; background: #5e564a; }
#screen-pit .pt-t-gait[data-band='drag'] i:nth-child(3) { animation-delay: 1.1s; }

/* the breath: a lung that swells — rate and rhythm per band */
#screen-pit .pt-g-breath b {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a89e88, #51493a 75%);
  animation: pt-lung 2.4s ease-in-out infinite;
}
@keyframes pt-lung {
  0%, 100% { transform: scale(0.72); opacity: 0.55; }
  50% { transform: scale(1.12); opacity: 1; }
}
#screen-pit .pt-t-breath[data-band='silent'] b { animation-duration: 3.4s; }
#screen-pit .pt-t-breath[data-band='even'] b { animation-duration: 2.4s; }
#screen-pit .pt-t-breath[data-band='loud'] b { animation-duration: 1.4s; }
#screen-pit .pt-t-breath[data-band='ragged'] b { animation: pt-rag 1.5s linear infinite; background: radial-gradient(circle at 35% 35%, #b07a6e, #5e3a35 75%); }
@keyframes pt-rag {
  0%, 100% { transform: scale(0.7); }
  18% { transform: scale(1.1); }
  30% { transform: scale(0.8); }
  42% { transform: scale(1.05); }
  55%, 80% { transform: scale(0.68); }
}

/* the marks: scar strokes, count and colour per band */
#screen-pit .pt-g-marks { gap: 3px; }
#screen-pit .pt-g-marks s {
  display: inline-block;
  width: 2px;
  height: 0.8rem;
  transform: rotate(18deg);
  background: #7a7260;
  text-decoration: none;
}
#screen-pit .pt-t-marks[data-band='healed'] s { background: #6b6353; }
#screen-pit .pt-t-marks[data-band='sound'] s { background: #8d8470; }
#screen-pit .pt-t-marks[data-band='fresh'] s { background: #a8584f; }
#screen-pit .pt-t-marks[data-band='bleeding'] s {
  background: var(--red);
  box-shadow: 0 0 5px rgba(168, 54, 46, 0.8);
  animation: pt-bleed 1.6s ease-in-out infinite;
}
@keyframes pt-bleed { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* the terms: chalk on slate */
#screen-pit .pt-terms {
  margin-top: 0.1rem;
  padding: 0.32rem 0.2rem;
  background: linear-gradient(175deg, #1b1d1c, #121413);
  border: 1px solid #2e332f;
  border-radius: 2px;
}
#screen-pit .pt-termword {
  font-size: 0.95rem;
  letter-spacing: 0.18em;
  color: #e8e4d7;
  text-shadow: 0 0 8px rgba(232, 228, 215, 0.3);
}
#screen-pit .pt-corner.house .pt-termword { color: #d4948b; }

/* stake buttons — thumb-fair */
#screen-pit .pt-stakes {
  display: flex;
  gap: 0.3rem;
  justify-content: center;
}
#screen-pit .pt-stakebtn {
  flex: 1 1 0;
  min-height: 48px;
  min-width: 0;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.1rem;
  border-color: var(--gold-dim);
  color: var(--gold);
  background:
    radial-gradient(circle at 50% -40%, rgba(216, 180, 90, 0.14), transparent 60%),
    var(--felt-deep);
}
#screen-pit .pt-stakebtn:disabled { color: #5a5346; border-color: #3a3528; }
#screen-pit .pt-chipface { margin-right: 0.2rem; opacity: 0.8; font-size: 0.8em; }
#screen-pit .pt-card.housecard .pt-stakebtn { border-color: #6e3a33; color: #d4948b; }

/* the crowd lean — NOT a tell, and the rules say so */
#screen-pit .pt-crowdlean {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
}
#screen-pit .pt-leanbar {
  position: relative;
  width: 82%;
  height: 0.36rem;
  background: #15120c;
  border: 1px solid #2c2415;
  border-radius: 2px;
  overflow: hidden;
}
#screen-pit .pt-leanbar i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, rgba(216, 180, 90, 0.5), rgba(216, 180, 90, 0.15));
  transition: width 0.8s ease;
}
#screen-pit .pt-crowdlean[data-lean='b'] .pt-leanbar i {
  background: linear-gradient(270deg, rgba(216, 180, 90, 0.5), rgba(216, 180, 90, 0.15));
}
#screen-pit .pt-crowdlean[data-lean='dead'] .pt-leanbar { border-color: #471a16; }
#screen-pit .pt-leanword { font-size: 0.72rem; font-style: italic; }
#screen-pit .pt-crowdlean[data-lean='dead'] .pt-leanword { color: #a8584f; }

#screen-pit .pt-sit {
  margin: 0.7rem auto 0;
  display: block;
  min-height: 48px;
  min-width: 12rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
}

/* ---------- THE BOUT THEATRE — letterboxed ---------- */
#screen-pit .pt-theatre {
  position: relative;
  margin: 0.2rem auto 0;
  max-width: 480px;
  background: #000;
  border: 1px solid #2c2415;
  border-radius: 3px;
  padding: 0.5rem 0;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}
#screen-pit .pt-theatre.housebout { border-color: #471a16; }
#screen-pit .pt-stage {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
#screen-pit .pt-verdict {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(2, 1, 1, 0.72);
  padding: 0.8rem;
  animation: pt-verdict-in 0.4s ease-out;
}
@keyframes pt-verdict-in { from { opacity: 0; } to { opacity: 1; } }
#screen-pit .pt-v1 {
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-shadow: 0 0 16px rgba(216, 180, 90, 0.4);
  text-align: center;
}
#screen-pit .pt-verdict[data-kind='lost'] .pt-v1 { color: #c98e86; text-shadow: 0 0 14px rgba(168, 54, 46, 0.5); }
#screen-pit .pt-verdict[data-kind='sat'] .pt-v1 { color: #8d8470; text-shadow: none; }
#screen-pit .pt-v1.pt-vdown { color: var(--red); }
#screen-pit .pt-v2 { max-width: 22rem; text-align: center; font-size: 0.8rem; }

/* ---------- the last-bout offer ---------- */
#screen-pit .pt-offer {
  position: fixed;
  inset: 0;
  z-index: 42;
  background: rgba(3, 2, 2, 0.94);
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.7rem;
}
#screen-pit .pt-offer-inner {
  max-width: 26rem;
  text-align: center;
  border: 1px solid #4a1714;
  background: linear-gradient(175deg, #16100e, #0b0807);
  padding: 1.1rem 0.9rem 1.2rem;
  border-radius: 4px;
  box-shadow: 0 0 40px rgba(168, 54, 46, 0.18), 0 18px 50px rgba(0, 0, 0, 0.8);
  animation: pt-offer-in 0.7s ease-out;
}
@keyframes pt-offer-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
#screen-pit .pt-offer-head { color: #a8584f; letter-spacing: 0.3em; font-size: 0.72rem; }
#screen-pit .pt-offer-card {
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  color: var(--bone);
  margin: 0.7rem 0;
}
#screen-pit .pt-offer-card b { color: var(--gold); }
#screen-pit .pt-offer-tells {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin: 0.6rem 0;
}
#screen-pit .pt-offer-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border: 1px solid #2c2415;
  padding: 0.5rem 0.3rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.3);
}
#screen-pit .pt-offer-who { font-size: 0.6rem; letter-spacing: 0.22em; color: var(--gold-dim); margin-bottom: 0.15rem; }
#screen-pit .pt-offer-tell { font-size: 0.72rem; }
#screen-pit .pt-offer-tell[data-band='prowl'], #screen-pit .pt-offer-tell[data-band='silent'], #screen-pit .pt-offer-tell[data-band='healed'] { color: #cfc9b8; }
#screen-pit .pt-offer-tell[data-band='drag'], #screen-pit .pt-offer-tell[data-band='ragged'], #screen-pit .pt-offer-tell[data-band='bleeding'] { color: #a8584f; }
#screen-pit .pt-offer-words { max-width: 22rem; margin: 0.5rem auto; }
#screen-pit .pt-offer-btns {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: 0.8rem;
}
#screen-pit .pt-offer-btns button { min-height: 48px; letter-spacing: 0.16em; margin: 0; }

/* ---------- footer ---------- */
#screen-pit .pt-footer {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 1rem;
}
#screen-pit .pt-footer .dim-btn { margin-top: 0; font-size: 0.74rem; padding: 0.45rem 0.9rem; min-height: 44px; }

/* ---------- explainer (placards reuse global .rule-card family) ---------- */
#screen-pit .pt-explainer {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(4, 4, 3, 0.94);
  overflow-y: auto;
  padding: 1.6rem 0.8rem 2.4rem;
  text-align: center;
}
#screen-pit .pt-explainer-house {
  font-style: italic;
  color: var(--bone);
  max-width: 26rem;
  margin: 1.2rem auto 1rem;
}
#screen-pit .pt-dismiss { min-height: 48px; letter-spacing: 0.2em; }
#screen-pit .pt-howto {
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.55;
  color: #a9a28d;
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
}
#screen-pit .pt-howto li { margin-bottom: 0.45rem; }
#screen-pit .pt-howto b { color: var(--gold); }

/* placard demos */
#screen-pit .pt-demo {
  position: relative;
  height: 3.65rem;
  margin: 0 auto;
  max-width: 11rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  overflow: hidden;
}
#screen-pit .pt-demo-fighter {
  width: 1rem;
  height: 2.6rem;
  background: #0b0805;
  border-radius: 40% 40% 12% 12%;
  box-shadow: 0 -0.62rem 0 -0.22rem #0b0805;
  margin-top: 0.6rem;
  animation: pt-demo-bob 2.2s ease-in-out infinite;
}
@keyframes pt-demo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
#screen-pit .pt-demo-tellrows { display: flex; flex-direction: column; gap: 0.22rem; text-align: left; }
#screen-pit .pt-demo-tellrows i { font-size: 0.66rem; color: #9a937e; }
#screen-pit .pt-demo-tellrows i:last-child { color: #a8584f; }
#screen-pit .pt-demo-term {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: #e8e4d7;
  background: linear-gradient(175deg, #1b1d1c, #121413);
  border: 1px solid #2e332f;
  padding: 0.45rem 0.7rem;
  border-radius: 2px;
}
#screen-pit .pt-demo-term.rich {
  color: var(--gold);
  text-shadow: 0 0 10px rgba(216, 180, 90, 0.5);
  animation: pt-demo-rich 2.4s ease-in-out infinite;
}
@keyframes pt-demo-rich { 0%, 60%, 100% { transform: none; } 75% { transform: scale(1.07); } }
#screen-pit .pt-demo-lamp {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ffe2a0;
  box-shadow: 0 0 14px 5px rgba(255, 214, 140, 0.45);
  animation: pt-demo-gutter 2.8s linear infinite;
}
@keyframes pt-demo-gutter {
  0%, 55%, 70%, 100% { opacity: 1; }
  58%, 62%, 66% { opacity: 0.15; }
}
#screen-pit .pt-demo-dash { font-size: 1rem; letter-spacing: 0.2em; color: #a8584f; }

/* ---------- end panel: THE BOOK ---------- */
#screen-pit .pt-end {
  position: fixed;
  inset: 0;
  z-index: 38;
  background: rgba(4, 4, 3, 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
}
#screen-pit .pt-end-scroll {
  max-width: 28rem;
  max-height: 94vh;
  overflow-y: auto;
  text-align: center;
  padding: 1rem 0.6rem 1.4rem;
}
#screen-pit .pt-end h3 {
  margin: 0.4rem 0 0.2rem;
  font-size: 1.45rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(216, 180, 90, 0.35);
}
#screen-pit .pt-end h3.pt-down { color: var(--red); text-shadow: 0 0 18px rgba(168, 54, 46, 0.4); }
#screen-pit .pt-end-detail { margin: 0.2rem 0; color: var(--bone); letter-spacing: 0.04em; font-size: 0.9rem; }
#screen-pit .pt-book {
  margin: 0.9rem 0 0.6rem;
  border: 1px solid #2c2415;
  background: linear-gradient(175deg, #14110b, #0d0b07);
  border-radius: 3px;
  padding: 0.6rem 0.5rem;
}
#screen-pit .pt-book-label { display: block; font-size: 0.62rem; letter-spacing: 0.26em; color: var(--gold-dim); margin-bottom: 0.5rem; }
#screen-pit .pt-book-row {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.1rem 0.5rem;
  text-align: left;
  padding: 0.4rem 0.2rem;
  border-top: 1px dashed rgba(216, 180, 90, 0.1);
}
#screen-pit .pt-book-row:first-of-type { border-top: 0; }
#screen-pit .pt-book-row.house { background: rgba(74, 23, 20, 0.12); }
#screen-pit .pt-book-bout { grid-row: span 3; align-self: start; color: var(--gold-dim); font-size: 0.8rem; }
#screen-pit .pt-book-win { font-size: 0.78rem; color: var(--bone); }
#screen-pit .pt-book-win i { color: #8d8470; }
#screen-pit .pt-book-bet, #screen-pit .pt-book-crowd { font-size: 0.7rem; }
#screen-pit .pt-end-house {
  font-style: italic;
  color: #9a937e;
  max-width: 24rem;
  margin: 0.6rem auto 1rem;
}
#screen-pit .pt-end-leave { min-height: 48px; letter-spacing: 0.18em; }

/* ---------- mobile: thumb-fair at ≤600px, no horizontal scroll ---------- */
@media (max-width: 600px) {
  #screen-pit .pt-room { padding: 0.2rem 0.2rem 1.4rem; }
  #screen-pit .pt-hud { gap: 0.6rem; }
  #screen-pit .pt-keeper { font-size: 0.8rem; min-height: 1.9rem; }
  #screen-pit .pt-fighters { gap: 0.25rem; }
  #screen-pit .pt-vs { font-size: 0.8rem; padding: 0; }
  #screen-pit .pt-corner { padding: 0.4rem 0.25rem; }
  #screen-pit .pt-fname { font-size: 0.7rem; letter-spacing: 0.08em; }
  #screen-pit .pt-tellword { font-size: 0.66rem; }
  #screen-pit .pt-glyph { flex-basis: 1.3rem; }
  #screen-pit .pt-termword { font-size: 0.85rem; letter-spacing: 0.12em; }
  #screen-pit .pt-stakes { gap: 0.22rem; }
  #screen-pit .pt-stakebtn { font-size: 0.88rem; min-height: 48px; padding: 0.25rem 0; }
  #screen-pit .pt-theatre { max-width: 100%; }
  #screen-pit .pt-stage { max-height: 46vh; }
  #screen-pit .pt-offer-tells { flex-direction: row; }
  #screen-pit .pt-book-row { grid-template-columns: 1.2rem 1fr; }
}