/* Win-chance statistics in the hand history. Owned by src/client/history-stats.ts. */

/* ---------- Triggers ---------- */

.has-odds [data-odds-street] {
  border-radius: 0.4rem;
  outline: 2px solid transparent;
  outline-offset: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease, filter 0.2s ease, outline-color 0.15s ease;
}

.has-odds [data-odds-street]:hover,
.has-odds [data-odds-street]:focus-visible {
  outline-color: rgba(255, 204, 77, 0.75);
}

.has-odds [data-odds-street]:focus:not(:focus-visible) {
  outline-color: transparent;
}

/* The board label stacks every word it can show so its width never changes. */
.has-odds .history-label {
  display: inline-grid;
  justify-items: start;
  padding: 0.1rem 0.15rem;
  margin: -0.1rem -0.15rem;
}

.odds-word {
  grid-area: 1 / 1;
  visibility: hidden;
}

.odds-word[data-word="board"] {
  visibility: visible;
  text-decoration: underline dotted rgba(191, 245, 216, 0.55);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
}

.history-hand[data-odds] .odds-word[data-word="board"] {
  visibility: hidden;
}

.history-hand[data-odds="preflop"] .odds-word[data-word="preflop"],
.history-hand[data-odds="flop"] .odds-word[data-word="flop"],
.history-hand[data-odds="turn"] .odds-word[data-word="turn"],
.history-hand[data-odds="river"] .odds-word[data-word="river"] {
  visibility: visible;
  color: var(--gold);
}

/* ---------- Board dimming: cards not yet dealt at the chosen moment ---------- */

.history-hand[data-odds="preflop"] .history-street,
.history-hand[data-odds="flop"] .history-street[data-street="turn"],
.history-hand[data-odds="flop"] .history-street[data-street="river"],
.history-hand[data-odds="turn"] .history-street[data-street="river"] {
  opacity: 0.25;
  filter: saturate(0.3);
}

.history-hand[data-odds="flop"] .history-street[data-street="flop"],
.history-hand[data-odds="turn"] .history-street[data-street="turn"],
.history-hand[data-odds="river"] .history-street[data-street="river"],
.history-hand[data-odds="preflop"] .history-label {
  outline-color: rgba(255, 204, 77, 0.75);
}

/* A hand run twice: only the board on display lights up, the other fades. */
.history-hand[data-odds-run="1"] .history-board.history-board-two .history-street,
.history-hand[data-odds-run="2"] .history-board:not(.history-board-two) .history-street {
  opacity: 0.25;
  filter: saturate(0.3);
  outline-color: transparent;
}

.history-hand[data-odds-run="2"] .odds-word[data-word="board"] {
  visibility: visible;
}

.history-hand[data-odds-run="2"] .odds-word:not([data-word="board"]) {
  visibility: hidden;
}

/* ---------- Discoverability hint ---------- */

.odds-hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  color: #bff5d8;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.8;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.odds-hint-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 0 0 1px rgba(191, 245, 216, 0.4);
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Spell the hint out, on its own line, only on the newest hand that has odds;
   older hands just keep the small badge. */
.history-hand.has-odds:not(.has-odds ~ .has-odds) .odds-hint {
  flex-basis: 100%;
  margin-left: 0;
}

.history-hand.has-odds ~ .history-hand.has-odds .odds-hint-text {
  display: none;
}

.history-hand[data-odds] .odds-hint {
  opacity: 0;
}

@media (hover: hover) {
  .odds-hint-touch { display: none; }
}

@media (hover: none) {
  .odds-hint-hover { display: none; }
}

/* ---------- Player rows ---------- */

.has-odds .history-line {
  position: relative;
  isolation: isolate;
}

/* Net result and odds share the last column and swap places. */
.has-odds .history-line > .net,
.odds-pill {
  grid-row: 1;
  grid-column: 4;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.history-hand[data-odds] .odds-row > .net {
  opacity: 0;
  transform: scale(0.9);
}

.history-hand[data-odds] .history-line:not(.odds-row) {
  opacity: 0.4;
}

/* The odds column: a win chip, a tie chip under a "TIE" label, or a win chip
   with a small tie note under it. Everything fits the row's height. */
.odds-pill {
  display: grid;
  justify-self: end;
  justify-items: end;
  align-content: center;
  gap: 0.1rem;
  min-width: 3.1rem;
  font-family: var(--display);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.history-hand[data-odds] .odds-pill {
  opacity: 1;
  transform: none;
}

.odds-chip {
  min-width: 3.1rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  text-align: center;
}

.odds-chip.lead {
  background: linear-gradient(180deg, #ffe07a, var(--gold) 60%, #f0b429);
  color: #3d2300;
  box-shadow: 0 0 0 1px rgba(255, 224, 122, 0.4), 0 0 12px rgba(255, 204, 77, 0.35);
}

.odds-chip.dead {
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.odds-chip.tie {
  background: linear-gradient(180deg, #6ff0b2, var(--green) 60%, #17a865);
  color: #04301b;
  box-shadow: 0 0 0 1px rgba(111, 240, 178, 0.45), 0 0 14px rgba(34, 192, 122, 0.55);
}

.odds-tie {
  display: grid;
  justify-items: center;
  gap: 0.05rem;
}

.odds-tie-label {
  color: #6ff0b2;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(34, 192, 122, 0.6);
}

.odds-tie-note {
  color: #6ff0b2;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.odds-pill.pending {
  padding: 0.15rem 0.5rem;
  color: var(--muted);
  animation: odds-wait 0.9s ease-in-out infinite alternate;
}

.history-hand[data-odds] .odds-pill.pop {
  animation: odds-pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}

/* A bar behind each row fills to that player's share of the pot. */
.odds-bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: calc(var(--equity, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.1));
  box-shadow: inset -2px 0 0 rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
}

.history-hand[data-odds] .odds-bar {
  opacity: 1;
}

.odds-lead .odds-bar {
  background: linear-gradient(90deg, rgba(255, 204, 77, 0.06), rgba(255, 204, 77, 0.24));
  box-shadow: inset -2px 0 0 rgba(255, 204, 77, 0.55);
}

@keyframes odds-pop {
  from { transform: scale(0.82); }
  to { transform: none; }
}

@keyframes odds-wait {
  from { opacity: 0.45; }
  to { opacity: 1; }
}

/* ---------- Live odds over the seats, for spectators (src/client/table-odds.ts) ---------- */

.seat-cards {
  position: relative;
}

.seat-odds {
  position: absolute;
  bottom: calc(100% + 0.15rem);
  left: 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  translate: -50% 0;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
}

.seat-odds .odds-chip:not(.lead, .tie) {
  background: rgba(22, 10, 31, 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.seat-odds.pending .odds-chip {
  color: var(--muted);
  animation: odds-wait 0.9s ease-in-out infinite alternate;
}

.seat-odds.pop {
  animation: odds-pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1);
}