/* 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: 22px;
}
/* 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; }
h2 { margin: 0; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }

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

/* Card inputs. These are hand sized; the board overrides down to 80% below. */
.card {
  width: 52px; height: 62px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: 600 20px/1 var(--font);
  text-align: center;
  padding: 0;
  cursor: pointer;
  caret-color: transparent;
}
.card::placeholder { color: #4b5a68; font-weight: 400; font-size: 15px; }
.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); }
.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 table: hands around the ring, board in the middle */
/* No panel round it: the seats and the felt are boxes already, and a border
   drawn round all of them was a second frame saying the same thing. The margin
   is what the panel used to contribute. */
.table-panel {
  padding: 0 10px; margin-bottom: 13px;
  display: flex; justify-content: center;
}
.table {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* The felt and the board share the middle cell; the felt is first in the
   markup, so the board paints over it. */
/* Rounded rather than an oval. A board that can run to seven rows is taller
   than it is wide, and a 50% radius on that draws a pointed arch rather than
   the felt it is standing in for. */
.felt { display: none; }

/* A row a street. Ten slots in a line made the middle column of the ring twice
   the width of the seats either side of it, so the board stacks instead: flop,
   turn just under it, then the river four to a row. */
.board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.board-row { display: flex; justify-content: center; gap: 8px; }
/* Rows the hand has not reached yet. */
.board-row.gone { display: none; }
/* The turn belongs with the flop, so it sits closer to it than to the river. */
.board-row.tight { margin-top: -5px; }
.board .card { width: 42px; height: 50px; font-size: 16px; border-radius: 6px; }
.board .card::placeholder { font-size: 12px; }
.slot { display: flex; flex-direction: column; align-items: center; }
/* Turn and river stand off from the flop, so the streets read at a glance. */

/* The seats as a list under the board rather than a ring around it. A ring
   needs a height fixed in advance to sit its seats against, which a board that
   can run to seven rows does not have -- the middle of it grew past the box and
   the seats below went with it, off the bottom of a page that never got any
   taller to scroll. */
.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(200px, 1fr));
  gap: 8px;
  width: 100%;
}
/* The hand number 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; }

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 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); }
.seat { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.holecards { display: flex; gap: 8px; }

.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;
}
/* The fold-out list of what the hand becomes. Closed it is one quiet line, so
   it does not compete with the equity figure above it. */
/* Capped, and centred in what it is given. Seats sit in the ring's grid, and
   the columns take their width from what is in them -- left to spread, ten
   rows of table would pull one seat to five times the width of the rest. */
.made { width: 100%; max-width: 190px; margin: 4px auto 0; text-align: left; }
.made > summary {
  color: var(--muted); font-size: 10px; cursor: pointer; list-style: none;
  text-align: center; padding: 2px 0;
}
.made > summary::-webkit-details-marker { display: none; }
.made > summary::after { content: " ▾"; }
.made[open] > summary::after { content: " ▴"; }
.made > summary:hover { color: var(--text); }
.made-rows { margin-top: 3px; }
/* Three columns: the category, what it comes to here, and what it would have
   come to in Hold'em, on one line at every width. The two numbers are the
   same width so they line up down the table however wide the seat is; the
   category is what gives way when the seat is narrow. */
.made-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px;
  color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums;
}
.made-row > span:nth-child(2), .made-row > span:nth-child(3) {
  min-width: 42px; text-align: right; white-space: nowrap;
}
/* The baseline is the quieter of the two: this game's own number leads. */
.made-base { opacity: 0.62; }
.made-head { color: var(--muted); opacity: 0.75; letter-spacing: 0.04em; }
.made-head > span { font-size: 9px; text-transform: uppercase; }

/* A seat in the ring is narrow. Ten rows that each wrap onto three lines would
   push the seat over the one below it, so the name gives way instead. */
.made-row > span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  /* The engine names the categories in lower case, which is right for a
     sentence and wrong for a column of labels. */
  text-transform: capitalize;
}
.made-row > span:last-child { white-space: nowrap; flex: 0 0 auto; }
/* Kept in the list so every seat reads the same, but out of the way. */
.made-row.never { opacity: 0.35; }

.bar { height: 5px; border-radius: 3px; background: var(--panel-2); 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; }
/* Pinned rather than sized by content. A longer status now wraps into its
   own column rather than pulling the column wider and pushing the deck along. */
.side { flex: none; width: 254px; display: flex; flex-direction: column; gap: 10px; }
.deck {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: 5px;
  max-width: 624px;
}
.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:disabled { opacity: 0.55; cursor: default; }
button.ghost { background: transparent; color: var(--muted); border: 1px solid var(--line); }
button.ghost:hover { background: var(--panel-2); color: var(--text); }

.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; }
.seg:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; }
.seg:hover { background: var(--panel-2); color: var(--text); }
#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;
  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); }

/* Too narrow for the ring: board on top, hands stacked below it. */
@media (max-width: 940px) {
  .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 { max-width: none; width: 100%; }
  .side { flex-direction: row; align-items: center; width: 100%; }
  
  .players { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

@media (max-width: 620px) {
  /* Narrow enough that three across leaves nothing readable: hold it at two. */
  .players { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck { gap: 4px; }
  .deck-card { font-size: 10px; padding: 6px 0; }
  .pip { font-size: 9px; }
}