/* =========================================================
   PHASE 2 - odds, payouts, 3-card bonus, hole-card strategy.

   Only the components guide.css does not already provide. Everything
   else on these four pages reuses the existing vocabulary: .post-body,
   .pay-simple, .value-grid, .strat-card, .rule-list, .tag, .note-personal,
   .panel-box, .return-wrap / .return-scroll / .return-table, .short-box,
   .related-grid, .side-list.
   ========================================================= */

/* ---------------------------------------------------------
   1. Statistics tables.

   These reuse .return-wrap / .return-scroll / .return-table wholesale.
   The return table on the pocket guide has its one text column in
   position four; on these pages the text column is the first one, so
   the header alignment is the only thing that needs saying again.
   --------------------------------------------------------- */
.return-table.stat thead th:first-child{ text-align:left; }
.return-table.stat thead th:nth-child(4){ text-align:right; }
.return-table.stat td:first-child{ text-align:left; color:var(--navy); }
.return-table.stat tfoot td{
  font-family:var(--display); font-weight:600;
  color:var(--navy);
}
.return-table.stat tfoot tr:first-child td{ border-top:2px solid var(--hair); }

/* ---------------------------------------------------------
   2. Outcome bar - one settled hand, split into win / push / lose.

   The segment widths are the measured frequencies, expressed as
   flex-grow so nothing has to be written inline.
   --------------------------------------------------------- */
.outcome-bar{
  display:flex;
  height:38px;
  border:1px solid var(--hair);
  border-radius:6px;
  overflow:hidden;
  margin:0 0 10px;
}
.outcome-bar span{
  display:grid; place-items:center;
  min-width:0; overflow:hidden; white-space:nowrap;
  font-family:var(--display); font-weight:600;
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:#FBF6EC;
}
.outcome-bar .seg-win { flex:16.0515 1 0; background:var(--green); }
/* cream on gold was 2.18:1; the push segment needs a dark label */
.outcome-bar .seg-push{ flex:10.1758 1 0; background:var(--gold); color:#3A2C10; }
.outcome-bar .seg-lose{ flex:73.7727 1 0; background:var(--crimson); }

.outcome-key{
  display:flex; flex-wrap:wrap; gap:8px 20px;
  margin:0 0 clamp(20px,2.6vw,28px);
  font-size:12.5px; color:var(--navy-soft);
}
.outcome-key span{ display:flex; align-items:center; gap:7px; }
.outcome-key i{
  width:11px; height:11px; border-radius:2px; flex:none;
}
.outcome-key .k-win { background:var(--green); }
.outcome-key .k-push{ background:var(--gold); }
.outcome-key .k-lose{ background:var(--crimson); }
.outcome-key b{ font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------
   3. Starting-hand matrix - 169 hand types, 13 x 13.

   Cells carry the existing .tag .r3 / .r1 / .fold classes for their
   colour and type, so only the grid geometry is new here.
   --------------------------------------------------------- */
.matrix-wrap{ overflow-x:auto; margin:0 0 10px; }
.hand-matrix{
  width:100%; min-width:430px;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:2px;
}
.hand-matrix th{
  font-family:var(--display); font-weight:600;
  font-size:11px; letter-spacing:.03em;
  color:var(--navy-soft);
  text-align:center;
  padding:2px 0;
}
.hand-matrix td{ padding:0; }
.hand-matrix .tag{
  display:block;
  padding:6px 0;
  font-size:10px; letter-spacing:.02em;
}
.matrix-note{
  font-size:12px; color:var(--navy-soft);
  margin:0 0 clamp(20px,2.6vw,28px);
}

/* ---------------------------------------------------------
   4. Two-column comparison rows - used to set one bet against another.
   --------------------------------------------------------- */
.versus{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin:0 0 clamp(20px,2.6vw,28px);
}
.versus > div{
  border:1px solid var(--hair);
  border-radius:6px;
  background:var(--paper-2);
  padding:14px 16px;
}
.versus h3{
  font-family:var(--display); font-weight:600;
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--crimson); margin:0 0 8px;
}
.versus dl{ display:grid; grid-template-columns:1fr auto; gap:5px 12px; }
.versus dt{ font-size:13px; color:var(--navy-soft); }
.versus dd{
  margin:0;
  font-family:var(--display); font-weight:600; font-size:13.5px;
  color:var(--navy); text-align:right;
  font-variant-numeric:tabular-nums;
}

@media (min-width:640px){
  .versus{ grid-template-columns:1fr 1fr; }
}