/* ============================================================
   THE PIT — 2.5D integration. Scoped to body.room3d-pit.
   The Three.js sunken pit (rooms3d/pit.mjs) — sawdust ring, two
   articulated fighters (one the red-eyed House's man), a swinging
   gaslamp and a silhouetted crowd — IS the play environment behind
   the UI. The game's own 2D fight canvas (.pt-stage in .pt-theatre)
   would DOUBLE those 3D fighters, so it is hidden here: the 3D pit
   is the visual, and the holographic chrome takes the bet over it.

   The two-fighter bet card, the terms/odds, the stakes and SIT
   control are restyled to holographic glass and laid in the LOWER
   third so the 3D fighters (upper-centre) read above them — matching
   the Parlor's house3d.css look.

   Palette: bone #efe7d6, brass #c8a85e, brass-deep #5e4c25,
            red #cf4636 (RED reserved for blood / the House's man /
            loss only).
   ============================================================ */

body.room3d-pit {
  --pt-bone: #efe7d6;
  --pt-brass: #c8a85e;
  --pt-brass-deep: #5e4c25;
  --pt-red: #cf4636;
}

/* ------------------------------------------------------------------
   THE DOUBLE, REMOVED — hide the room's own 2D fight canvas.
   The fight is drawn to <canvas class="pt-stage"> inside .pt-theatre;
   the 3D scene already stages the fighters, the pit and the lamp, so
   showing the 2D stage too would double them. Drop the canvas and the
   theatre's black letterbox frame — but KEEP .pt-verdict (the win/loss
   result that overlays inside .pt-theatre) as a readable glass card.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-stage,
:root.mono body.room3d-pit #screen-pit .pt-stage {
  display: none !important;
}
body.room3d-pit #screen-pit .pt-theatre,
body.room3d-pit #screen-pit .pt-theatre.housebout {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  /* leave room for the verdict to read over the lower-centre of the pit */
  min-height: 9rem;
}

/* ------------------------------------------------------------------
   LET THE PIT SHOW THROUGH — neutralize the room's own backdrops.
   ------------------------------------------------------------------ */
/* the card's charcoal/oak panel and the slate corners are the 2D room's
   own atmosphere; the 3D pit supplies that now, so trade them for glass */
body.room3d-pit #screen-pit .pt-card {
  background: linear-gradient(168deg, rgba(20, 15, 9, 0.6), rgba(8, 7, 4, 0.5)) !important;
  border: 1px solid rgba(200, 168, 94, 0.42);
  box-shadow: 0 0 22px rgba(200, 168, 94, 0.12), inset 0 1px 0 rgba(200, 168, 94, 0.1), 0 16px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.room3d-pit #screen-pit .pt-card.housecard {
  background: linear-gradient(168deg, rgba(26, 11, 9, 0.62), rgba(9, 6, 5, 0.52)) !important;
  border-color: rgba(207, 70, 54, 0.42);
}

/* ------------------------------------------------------------------
   LAY THE BET CONTROLS IN THE LOWER THIRD so the fighters read above.
   On desktop the card sits inline; pin it low and let the pit own the
   upper screen. On mobile the card already rides a bottom sheet (see
   pit.css) — that lower-third behaviour is preserved untouched.
   ------------------------------------------------------------------ */
@media (min-width: 601px) {
  body.room3d-pit #screen-pit .pt-room {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
  }
  /* head + HUD + coach stay at the top; the card is pushed to the bottom
     so the 3D fighters in the upper-centre are never crowded */
  body.room3d-pit #screen-pit .pt-card { margin-top: auto; }
  body.room3d-pit #screen-pit .pt-theatre { margin-top: auto; }
  body.room3d-pit #screen-pit .pt-footer { margin-top: 0.7rem; }
}

/* ------------------------------------------------------------------
   HEAD + KEEPER + COACH — keep legible over the moving scene.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-head .label,
body.room3d-pit #screen-pit .pt-keeper,
body.room3d-pit #screen-pit .pt-coach {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
body.room3d-pit #screen-pit .pt-coach { border-left-color: var(--pt-brass-deep); }

/* ------------------------------------------------------------------
   HUD plaque → holographic glass (matches Parlor .hud-cell).
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-hud {
  border-bottom: 1px solid rgba(200, 168, 94, 0.22);
  background: linear-gradient(168deg, rgba(36, 26, 16, 0.5), rgba(18, 12, 8, 0.42));
  border-radius: 4px;
  padding: 0.4rem 0.7rem 0.5rem;
  box-shadow: inset 0 1px 0 rgba(200, 168, 94, 0.1), 0 6px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-pit #screen-pit .pt-purse { color: var(--pt-brass); }
/* the Bookmaker's slate keeps its dark stone, brass-edged over the glass */
body.room3d-pit #screen-pit .pt-markwrap {
  background: rgba(17, 16, 13, 0.7);
  border-color: rgba(200, 168, 94, 0.3);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
body.room3d-pit #screen-pit .pt-markwrap.full {
  border-color: var(--pt-red);
  box-shadow: 0 0 12px rgba(207, 70, 54, 0.45);
}

/* ------------------------------------------------------------------
   THE FIGHTER BET CARDS (corners) → holographic glass chips.
   These are how the bet is taken — they stay, readable, over the pit.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-corner {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.5), rgba(16, 11, 7, 0.42));
  border: 1px solid rgba(200, 168, 94, 0.4);
  box-shadow: 0 0 16px rgba(200, 168, 94, 0.08), inset 0 0 24px rgba(255, 190, 110, 0.04), 0 12px 30px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-pit #screen-pit .pt-corner.house {
  border-color: rgba(207, 70, 54, 0.45);
  background: linear-gradient(168deg, rgba(40, 16, 13, 0.52), rgba(15, 7, 6, 0.44));
}
body.room3d-pit #screen-pit .pt-fname { color: var(--pt-bone); }
body.room3d-pit #screen-pit .pt-corner.house .pt-fname { color: #e0938b; }

/* the terms (odds) on the slate — chalk over a dark stone tablet */
body.room3d-pit #screen-pit .pt-terms {
  background: linear-gradient(175deg, rgba(27, 29, 28, 0.78), rgba(18, 20, 19, 0.72));
  border-color: rgba(200, 168, 94, 0.28);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
body.room3d-pit #screen-pit .pt-termword { color: var(--pt-bone); }
body.room3d-pit #screen-pit .pt-corner.house .pt-termword { color: #d4948b; }

/* ------------------------------------------------------------------
   STAKE BUTTONS — holographic glass; pressing one PLACES THE BET.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-stakebtn {
  background: linear-gradient(168deg, rgba(38, 28, 18, 0.58), rgba(16, 11, 7, 0.48));
  border: 1px solid rgba(200, 168, 94, 0.5);
  color: var(--pt-brass);
  box-shadow: 0 0 14px rgba(200, 168, 94, 0.1), 0 10px 26px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-pit #screen-pit .pt-stakebtn:not(:disabled):hover {
  border-color: var(--pt-brass);
  box-shadow: 0 0 22px rgba(200, 168, 94, 0.32);
}
body.room3d-pit #screen-pit .pt-stakebtn:disabled {
  color: #6a6354;
  border-color: rgba(200, 168, 94, 0.16);
  background: linear-gradient(168deg, rgba(24, 18, 11, 0.42), rgba(12, 9, 6, 0.36));
}
/* the House's fighter keeps its blood-red price */
body.room3d-pit #screen-pit .pt-card.housecard .pt-stakebtn {
  border-color: rgba(207, 70, 54, 0.5);
  color: #d4948b;
}
body.room3d-pit #screen-pit .pt-card.housecard .pt-stakebtn:not(:disabled):hover {
  border-color: var(--pt-red);
  box-shadow: 0 0 22px rgba(207, 70, 54, 0.34);
}

/* ------------------------------------------------------------------
   THE CROWD LEAN + SIT OUT — kept, readable over the scene.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-leanbar {
  background: rgba(21, 18, 12, 0.7);
  border-color: rgba(200, 168, 94, 0.28);
}
body.room3d-pit #screen-pit .pt-crowdlean[data-lean='dead'] .pt-leanbar {
  border-color: rgba(207, 70, 54, 0.45);
}
body.room3d-pit #screen-pit .pt-leanword { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8); }

/* ------------------------------------------------------------------
   THE VERDICT — the bout result over the pit → glass card, readable.
   (It lives inside .pt-theatre, which we stripped to transparent, so
   give the verdict its own glass backing so it reads over the scene.)
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-verdict {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.74), rgba(4, 5, 6, 0.64));
  border: 1px solid rgba(200, 168, 94, 0.4);
  border-radius: 4px;
  box-shadow: 0 0 26px rgba(200, 168, 94, 0.14), 0 16px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.room3d-pit #screen-pit .pt-verdict[data-kind='lost'] {
  border-color: rgba(207, 70, 54, 0.45);
}
body.room3d-pit #screen-pit .pt-v1 { color: var(--pt-brass); }
body.room3d-pit #screen-pit .pt-verdict[data-kind='lost'] .pt-v1 { color: #e0938b; }
body.room3d-pit #screen-pit .pt-v1.pt-vdown { color: var(--pt-red); }

/* ------------------------------------------------------------------
   THE EXPLAINER (the rules placards) → LIGHT holographic glass, not
   an opaque scrim, so the pit shows through behind it.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-explainer {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.62), rgba(4, 5, 6, 0.5));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.room3d-pit #screen-pit .pt-explainer-house,
body.room3d-pit #screen-pit .pt-howto {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
body.room3d-pit #screen-pit .pt-howto b { color: var(--pt-brass); }

/* ------------------------------------------------------------------
   THE LAST-BOUT OFFER → light holographic glass over the pit.
   (The fixed scrim becomes glass; its inner card keeps its red frame —
   the House's offer rides on the slate's memory.)
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-offer {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.66), rgba(4, 5, 6, 0.54));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.room3d-pit #screen-pit .pt-offer-inner {
  background: linear-gradient(175deg, rgba(22, 16, 14, 0.82), rgba(11, 8, 7, 0.74)) !important;
  border-color: rgba(207, 70, 54, 0.5);
  box-shadow: 0 0 40px rgba(207, 70, 54, 0.2), 0 18px 50px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
body.room3d-pit #screen-pit .pt-offer-head { color: #e0938b; }
body.room3d-pit #screen-pit .pt-offer-card b { color: var(--pt-brass); }

/* ------------------------------------------------------------------
   THE END PANEL: THE BOOK → light holographic glass over the pit.
   ------------------------------------------------------------------ */
body.room3d-pit #screen-pit .pt-end {
  background: linear-gradient(168deg, rgba(10, 8, 6, 0.66), rgba(4, 5, 6, 0.54));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
body.room3d-pit #screen-pit .pt-end h3 { color: var(--pt-brass); }
body.room3d-pit #screen-pit .pt-end h3.pt-down { color: var(--pt-red); }
body.room3d-pit #screen-pit .pt-book {
  background: linear-gradient(168deg, rgba(30, 22, 14, 0.5), rgba(12, 9, 6, 0.42));
  border: 1px solid rgba(200, 168, 94, 0.4);
  box-shadow: 0 0 20px rgba(200, 168, 94, 0.1), 0 14px 34px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2.5px);
  -webkit-backdrop-filter: blur(2.5px);
}
body.room3d-pit #screen-pit .pt-book-row.house { background: rgba(207, 70, 54, 0.12); }
body.room3d-pit #screen-pit .pt-end-detail { color: var(--pt-bone); }
body.room3d-pit #screen-pit .pt-end-house { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85); }

/* ------------------------------------------------------------------
   MOBILE: the card already rides a bottom sheet (the lower third) in
   pit.css — so on mobile it is glass-over-pit by construction. Just
   make sure the dropped-card peek reads over the moving scene and the
   sheet-open scrim doesn't dim a 3D pit that's already gone (the 2D
   theatre filter targets .pt-theatre, now transparent — harmless).
   ------------------------------------------------------------------ */
@media (max-width: 600px) {
  body.room3d-pit #screen-pit .pt-sheet-label { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85); }
}