/* TeX Gyre Heros, a Helvetica built from URW's Nimbus Sans and released under
   the GUST Font License (fonts/GUST-FONT-LICENSE.txt). Naming Helvetica in a
   font stack is not enough: Windows does not ship it, so the stack fell through
   to Arial, whose a, t, C and R are drawn differently. Shipping the font is the
   only way the page looks the same on every machine. */
@font-face {
  font-family: "TeX Gyre Heros";
  src: url("fonts/texgyreheros-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TeX Gyre Heros";
  src: url("fonts/texgyreheros-bold.woff2") format("woff2");
  /* The page asks for 600 in places; spanning the range stops the browser
     smearing a synthetic bold over the real one. */
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #10161c;
  --panel: #182029;
  --panel-2: #1f2933;
  --line: #2b3742;
  --text: #e6edf3;
  --muted: #8b9aa8;
  --accent: #3fb27f;
  --accent-dim: #2c7a58;
  --bad: #e05252;
  --spade: #e6edf3;
  --heart: #ff6b6b;
  --diamond: #57a6ff;
  --club: #4fd18b;
  --font: "TeX Gyre Heros", Helvetica, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 26px 16px 51px;
  background: var(--bg);
  color: var(--text);
  font: 12px/1.5 var(--font);
}

main { max-width: 768px; margin: 0 auto; }

header {
  display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px;
  margin-bottom: 18px;
}
/* The other solver and the way back, sitting out at the end of the title line
   so they stay clear of the table below. */
.elsewhere { display: flex; flex-wrap: wrap; gap: 10px 14px;
  justify-content: flex-end; }
.elsewhere a {
  color: var(--muted); font-size: 11px; text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.elsewhere a:hover { color: var(--accent); }

h1 { margin: 0; font-size: 21px; letter-spacing: -0.01em; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  margin-bottom: 13px;
}

/* Card slots. Hand sized here; the board overrides just below. */
.card {
  width: 34px; height: 42px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font: 600 14px/1 var(--font);
  text-align: center;
  padding: 0;
  cursor: pointer;
  caret-color: transparent;
}
.card::placeholder { color: #4b5a68; font-weight: 400; font-size: 12px; }
.card:focus { outline: none; }
/* The slot the next deck click deals into. */
.card.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(63, 178, 127, 0.3); }
.card.invalid { border-color: var(--bad); box-shadow: 0 0 0 2px rgba(224, 82, 82, 0.2); }
/* The board has matched this rank, so the card is lying face up. */
.card.discarded { opacity: 0.4; text-decoration: line-through; border-style: dashed; }
.card.suit-s { color: var(--spade); }
.card.suit-h { color: var(--heart); }
.card.suit-d { color: var(--diamond); }
.card.suit-c { color: var(--club); }

/* The board, with the four streets standing off from one another */
.board-panel { position: relative; display: flex; justify-content: center; padding: 20px 13px; }
.felt {
  position: absolute; inset: 6px;
  border-radius: 50% / 34%;
  border: 1px solid var(--line);
  background: radial-gradient(ellipse at center, rgba(63, 178, 127, 0.10), rgba(63, 178, 127, 0.02) 72%, transparent);
}
.board {
  position: relative;
  display: flex; gap: 6px;
  flex-wrap: wrap; justify-content: center;
}
.board .card { width: 40px; height: 48px; font-size: 16px; }
.board .card::placeholder { font-size: 13px; }
.slot { display: flex; }
.board .slot.street { margin-left: 12px; }

/* Seats. Five cards plus a discard note will not fit a ring, so they lay out
   as a grid that reflows on its own. */
.players {
  display: grid;
  /* Each seat keeps its own height. Without this a seat with its showdown
     table open stretches the one beside it to match and leaves it hollow. */
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 10px;
}
.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  min-width: 0;
}
.player.leader { border-color: var(--accent-dim); background: rgba(63, 178, 127, 0.07); }
/* The checkbox on the left, the fold button on the right, on one line. */
.seat-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }

.fold {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 7px; font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.fold:hover { background: var(--panel-2); color: var(--text); }
.fold.on { border-color: var(--bad); color: var(--bad); }

/* Folded: still holding its cards, just no longer playing them. */
.player.folded .holecards { opacity: 0.4; }
.player.folded .result { display: none; }

.seat {
  display: flex; align-items: center; gap: 5px;
  color: var(--muted); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em; cursor: pointer;
}
.seat input { width: 12px; height: 12px; margin: 0; accent-color: var(--accent); cursor: pointer; }
/* Seat 1 is whoever is asking, so its box is fixed on rather than absent --
   an empty gap there would read as a seat you had forgotten to check. */
.seat input:disabled { cursor: default; opacity: 0.6; }

/* Out of the pot. The header stays legible so it can be checked back in; only
   what it is holding fades, since none of it counts. */
.player.out .holecards, .player.out .note { opacity: 0.3; }
.holecards { display: flex; gap: 5px; }
.note { color: var(--muted); font-size: 10px; }
.note:empty { display: none; }

.result { width: 100%; text-align: center; }
.result.empty { display: none; }
.equity-pct { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* One line each, so a seat never grows into the one beside it. */
.breakdown {
  color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bar { height: 5px; border-radius: 3px; background: var(--panel); margin: 5px 0 4px; overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--accent); border-radius: 3px; }

/* Deck */
.deck-panel { display: flex; align-items: flex-start; gap: 16px; }

/* 470 + 16 + 254 is the panel's inner width. Both columns are pinned, so a
   longer status line wraps inside its own column instead of widening it and
   shuffling the deck along -- `flex: none` rather than a basis, because the
   panel turns into a column below and a basis would set heights there. */
.side { flex: none; width: 254px; display: flex; flex-direction: column; gap: 10px; }
.deck {
  flex: none;
  width: 470px;
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 5px;
}
.deck-card {
  display: flex; align-items: center; justify-content: center; gap: 1px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--text);
  font: 600 11px/1 var(--font);
  padding: 7px 0;
  cursor: pointer;
}
.deck-card:hover { background: #26323d; border-color: var(--accent); }
.deck-card.used { opacity: 0.28; }
.deck-card.suit-s { color: var(--spade); }
.deck-card.suit-h { color: var(--heart); }
.deck-card.suit-d { color: var(--diamond); }
.deck-card.suit-c { color: var(--club); }
.pip { font-size: 10px; }

/* Controls */
button {
  background: var(--accent); color: #06110b; border: 0; border-radius: 6px;
  padding: 9px 18px; font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: var(--font);
}
button:hover { background: #4ac68e; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.ghost:hover { background: var(--panel-2); color: var(--text); }

/* Two halves of one control, so they read as a pair rather than two buttons
   that happen to sit together. */
.speed { display: flex; }
.seg {
  flex: 1 1 0;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 8px 12px; font-size: 11px; font-weight: 600;
}
.seg:first-child { border-radius: 6px 0 0 6px; }
/* Overlapped by a pixel rather than one of them going without a left border:
   that way whichever is lit draws the divider, instead of it vanishing when
   the half that owned it was not the half selected. */
.seg:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg:hover { background: var(--panel-2); color: var(--text); }
/* Clear sits directly under the pair, so it is built to the same metrics --
   otherwise the two controls stack at different heights and the column looks
   assembled from spare parts. */
#clear { padding: 8px 12px; font-size: 11px; }
.seg.on {
  background: rgba(63, 178, 127, 0.12);
  border-color: var(--accent-dim);
  color: var(--accent);
  position: relative;  /* over its neighbour, so its border is the one that shows */
  z-index: 1;
}

.status { display: flex; flex-direction: column; gap: 2px; margin: 0; color: var(--muted); font-size: 10px; min-height: 32px; }
.status-line { display: block; }
.status-detail { display: block; font-variant-numeric: tabular-nums; opacity: 0.7; min-height: 14px; }
.status.error { color: var(--bad); }

/* The seats are a bare grid rather than a panel, so they carry no margin of
   their own; this is what sets the legend the same distance off them as the
   panels above are set off each other. */
.glossary { margin-top: 13px; }
.glossary ul { margin: 0; padding-left: 16px; }
.glossary li { color: var(--muted); margin-bottom: 6px; max-width: 62em; }
.glossary li:last-child { margin-bottom: 0; }
.glossary b { color: var(--text); font-weight: 600; }

@media (max-width: 940px) {
  .players { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .deck-panel { flex-direction: column; }
  /* Column flex, so flex-grow works on the vertical axis: the deck has to be
     told to fill the width outright. */
  .deck { width: 100%; }
  .side { flex-direction: row; align-items: center; width: 100%; }
  .speed { flex: 0 0 auto; }
  .seg { flex: 0 0 auto; }
}

@media (max-width: 620px) {
  .deck { gap: 4px; }
  .deck-card { font-size: 10px; padding: 6px 0; }
  .pip { font-size: 9px; }
  .board .card { width: 34px; height: 42px; font-size: 14px; }
  .board .slot.street { margin-left: 8px; }
}

/* Phone width. A seat holds five cards, so at the sizes above only one column
   of them fits and the table runs on for eight screens. Everything the seat is
   built from comes down together -- cards, gaps, padding -- until two columns
   fit side by side, which is what the grid is asked for here. */
@media (max-width: 620px) {
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .player { padding: 8px 6px; gap: 5px; }
  .card { width: 26px; height: 33px; font-size: 12px; border-radius: 5px; }
  .holecards { gap: 4px; }
  .seat { font-size: 10px; gap: 4px; }
  .seat input { width: 11px; height: 11px; }
  .equity-pct { font-size: 15px; }
  .breakdown { font-size: 10px; }
  .note { font-size: 9px; }

  /* The board keeps a size of its own: it is one row of ten, not five, so it
     is the page width that sets it rather than the seat beside it. */
  .board-panel { padding: 14px 8px; }
  .board { gap: 4px; }
  .board .card { width: 28px; height: 35px; font-size: 12px; }
  .board .slot.street { margin-left: 6px; }
}

@media (max-width: 400px) {
  body { padding: 20px 10px 40px; }
  .deck { gap: 3px; }
  .deck-card { font-size: 9px; padding: 5px 0; }
  .pip { font-size: 8px; }
  .board .card { width: 25px; height: 31px; font-size: 11px; }
  .card { width: 24px; height: 30px; font-size: 11px; }
}