:root {
  --page: #14181d;
  --panel: #1d232b;
  --line: #2e3742;
  --ink: #eef1f4;
  --dim: #9aa5b1;
  --felt: #1f6b4a;
  --felt-dark: #154d35;
  --rail: #3b2a1c;
  --gold: #e9b949;
  --red: #d64545;
  --blue: #4a90d9;
  --card: #fbfbf8;
  --card-ink: #1a1d21;
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  color: var(--ink);
  background: var(--page);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--page);
}

.top {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
}

.top h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.stats {
  display: flex;
  gap: 28px;
  margin: 0 auto 0 12px;
}

.stats div {
  display: flex;
  flex-direction: column;
}

.stats dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.stats dd {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.up {
  color: #5fd08a;
}

.down {
  color: #ef7b7b;
}

main {
  padding: 20px 24px 28px;
  max-width: 1400px;
  margin: 0 auto;
}

.playing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 20px;
}

[hidden] {
  display: none !important;
}

/* the two screens */
.views {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.views button {
  padding: 6px 16px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-weight: 600;
}

.views button.on {
  background: var(--gold);
  color: #20180a;
}

body[data-view='learn'] .stats,
body[data-view='learn'] #startOver {
  visibility: hidden;
}

/* ---------- the table ---------- */

/* The felt is as wide as its column, but never so tall that the controls under it fall off the screen. The top
   margin is room for the cards of the player in the top seat, which sit above the rail. */
.felt {
  position: relative;
  width: min(100%, calc((100vh - 360px) * 16 / 9));
  min-width: 620px;
  margin: 58px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 50% / 46%;
  background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  border: 14px solid var(--rail);
  box-shadow:
    inset 0 0 0 3px rgba(0, 0, 0, 0.35),
    0 12px 30px rgba(0, 0, 0, 0.45);
}

.middle {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.board {
  display: flex;
  gap: 8px;
  min-height: 84px;
}

.pot {
  min-height: 24px;
  padding: 3px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pot:empty {
  visibility: hidden;
}

.card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 84px;
  border-radius: 7px;
  background: var(--card);
  color: var(--card-ink);
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.card .rank {
  font-size: 26px;
}

.card .suit {
  font-size: 24px;
  margin-top: 2px;
}

.card.red {
  color: var(--red);
}

.card.back {
  background: repeating-linear-gradient(45deg, #2b4f8f 0 6px, #244379 6px 12px);
  border: 3px solid var(--card);
}

.card.small {
  width: 44px;
  height: 62px;
  border-radius: 5px;
}

.card.small .rank {
  font-size: 19px;
}

.card.small .suit {
  font-size: 18px;
}

.card.empty {
  background: rgba(0, 0, 0, 0.14);
  box-shadow: none;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Six seats round the table, clockwise from the learner at the bottom: the action moves the same way. */
.seat {
  position: absolute;
  width: 170px;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.seat-0 {
  left: 50%;
  top: 97%;
}
.seat-1 {
  left: 11%;
  top: 76%;
}
.seat-2 {
  left: 11%;
  top: 22%;
}
.seat-3 {
  left: 50%;
  top: 1%;
}
.seat-4 {
  left: 89%;
  top: 22%;
}
.seat-5 {
  left: 89%;
  top: 76%;
}

.seat .hole {
  display: flex;
  gap: 4px;
  min-height: 62px;
}

.seat-0 .hole {
  min-height: 84px;
}

.plate {
  position: relative;
  width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 2px solid var(--line);
  text-align: center;
}

.plate .name {
  font-weight: 600;
}

.plate .stack {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

.seat.acting .plate {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(233, 185, 73, 0.25);
}

.seat.folded .hole,
.seat.folded .plate {
  opacity: 0.4;
}

.seat.winner .plate {
  border-color: #5fd08a;
}

.position {
  position: absolute;
  top: -10px;
  left: -8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.position.button {
  background: var(--card);
  color: var(--card-ink);
}

.said {
  min-height: 20px;
  font-size: 13px;
  color: var(--gold);
  font-weight: 600;
}

.holding {
  font-size: 13px;
  color: var(--dim);
}

/* chips a player has bet on this street, placed between the seat and the middle */
.bet {
  position: absolute;
  transform: translate(-50%, -50%);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.bet-0 {
  left: 50%;
  top: 72%;
}
.bet-1 {
  left: 27%;
  top: 66%;
}
.bet-2 {
  left: 27%;
  top: 33%;
}
.bet-3 {
  left: 50%;
  top: 24%;
}
.bet-4 {
  left: 73%;
  top: 33%;
}
.bet-5 {
  left: 73%;
  top: 66%;
}

/* ---------- the learner's controls ---------- */

.controls {
  margin-top: 84px;
  min-height: 132px;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.controls .facing {
  margin: 0 0 12px;
  color: var(--dim);
}

.controls .facing b {
  color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

button {
  font: inherit;
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: #2a323c;
  cursor: pointer;
}

button:hover {
  background: #343e4a;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: #20180a;
  font-weight: 700;
}

button.primary:hover {
  background: #f2c95f;
}

button.fold {
  border-color: #7a3b3b;
}

button.quiet {
  padding: 6px 12px;
  background: transparent;
  color: var(--dim);
}

button.small {
  padding: 5px 10px;
  font-size: 13px;
}

.sizing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}

.sizing input[type='number'] {
  width: 92px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.sizing input[type='range'] {
  width: 150px;
  accent-color: var(--gold);
}

.outcome {
  margin: 0 0 12px;
  font-size: 17px;
}

.outcome .note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--dim);
}

/* the choice of game, on the same row as the Deal button */
.games {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 14px;
  color: var(--dim);
}

.game-about {
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--dim);
  text-align: right;
}

.waiting {
  color: var(--dim);
}

.problem {
  margin: 10px 0 0;
  color: #ef7b7b;
}

/* ---------- this hand, line by line ---------- */

/* The column beside the table: the review of the hand just finished on top, where it is seen at once, and the
   hand written out line by line under it. */
.side {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hand-log {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.hand-log h2 {
  margin: 0 0 10px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.log {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 520px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.5;
}

.log li.street {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}

.log li.you {
  color: var(--gold);
}

.log li.win {
  font-weight: 700;
  color: #5fd08a;
}

.keys {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--dim);
}

kbd {
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--page);
  font: inherit;
}

/* ---------- the coach's review of a hand ---------- */

.review {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.review h2 {
  margin: 0 0 6px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.review-summary {
  margin: 0 0 14px;
  font-size: 17px;
}

.decisions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.decision {
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--page);
  border-left: 4px solid var(--line);
}

.decision.good {
  border-left-color: #5fd08a;
}

.decision.fine {
  border-left-color: #6f8fb3;
}

.decision.doubtful {
  border-left-color: var(--gold);
}

.decision.mistake {
  border-left-color: #ef7b7b;
}

/* the one decision most worth a second look */
.decision.look {
  outline: 1px solid var(--gold);
}

.decision .when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--dim);
}

.badge {
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #14181d;
  background: var(--line);
}

.good .badge {
  background: #5fd08a;
}

.fine .badge {
  background: #9db6d3;
}

.doubtful .badge {
  background: var(--gold);
}

.mistake .badge {
  background: #ef7b7b;
}

.at-board {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.card.tiny {
  flex-direction: row;
  gap: 1px;
  width: 34px;
  height: 24px;
  border-radius: 4px;
  box-shadow: none;
}

.card.tiny .rank,
.card.tiny .suit {
  margin: 0;
  font-size: 13px;
}

.decision .headline {
  margin: 6px 0 4px;
  font-weight: 600;
}

.decision ul {
  margin: 0;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.5;
  color: #c9d1da;
}

.decision button {
  margin-top: 8px;
}

/* ---------- the lessons ---------- */

.learn {
  display: grid;
  grid-template-columns: 280px minmax(0, 760px);
  gap: 28px;
  justify-content: center;
}

.lessons {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: start;
  position: sticky;
  top: 16px;
}

.lesson-link {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border-color: transparent;
}

.lesson-link.on {
  background: var(--panel);
  border-color: var(--line);
}

.lesson-link .mark {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--line);
  font-size: 13px;
  font-weight: 700;
}

.lesson-link .mark.done {
  background: #2f7d55;
}

.lesson-link .words {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.lesson-link .title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.lesson-link .summary {
  font-size: 13px;
  color: var(--dim);
}

.lesson-link .score {
  flex: none;
  font-size: 13px;
  color: var(--gold);
}

.lesson {
  font-size: 17px;
  line-height: 1.6;
}

.lesson h2 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.2;
}

.lesson h3 {
  margin: 30px 0 8px;
  font-size: 19px;
}

.lesson p,
.lesson ul {
  margin: 0 0 14px;
}

.lesson li {
  margin-bottom: 6px;
}

.eyebrow {
  margin: 0 0 6px !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
}

.tip {
  padding: 12px 16px;
  border-left: 3px solid var(--gold);
  background: var(--panel);
  border-radius: 0 8px 8px 0;
}

.example {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 12px;
}

.example div,
.five,
.group div {
  display: flex;
  gap: 4px;
}

.example figcaption {
  color: var(--dim);
}

.ranking {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: rank;
}

.ranking li {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.ranking li > div:last-child {
  display: flex;
  flex-direction: column;
}

.ranking li > div:last-child span {
  font-size: 15px;
  color: var(--dim);
}

.drill-start,
.result {
  margin-top: 34px;
  padding: 20px 22px;
  border-radius: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.drill-start h3 {
  margin-top: 0;
}

/* the starting-hand chart */
.chart table {
  border-collapse: separate;
  border-spacing: 2px;
  margin: 10px 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chart td {
  width: 46px;
  height: 30px;
  text-align: center;
  border-radius: 4px;
  background: #232b34;
  color: #6f7b88;
}

.chart td.raise,
.key.raise {
  background: #2f7d55;
  color: #fff;
  font-weight: 700;
}

.chart td.either,
.key.either {
  background: #6b5a24;
  color: #f1e3b0;
}

.seats-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 15px;
}

.seats-row button.on,
button.small.on {
  background: var(--gold);
  border-color: var(--gold);
  color: #20180a;
  font-weight: 700;
}

.legend {
  font-size: 14px;
  color: var(--dim);
}

.key {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px 0 12px;
  border-radius: 3px;
  vertical-align: -2px;
  background: #232b34;
}

.key:first-child {
  margin-left: 0;
}

/* a drill question */
.question h2 {
  font-size: 24px;
}

.ring {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 15px;
}

.ring span {
  position: relative;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.ring span.you {
  border-color: var(--gold);
}

.ring i {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--card);
  color: var(--card-ink);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.ring b {
  color: var(--dim);
  font-weight: 400;
}

.shown {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 20px;
}

.group > span {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dim);
}

.choices {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 12px 14px;
}

.choice:disabled {
  cursor: default;
  opacity: 1;
}

.choice.right {
  border-color: #5fd08a;
  background: #1f4634;
}

.choice.wrong {
  border-color: #ef7b7b;
  background: #4a2424;
}

.choice.dim {
  opacity: 0.45;
}

.verdict {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--panel);
  border-left: 3px solid #5fd08a;
}

.verdict.wrong {
  border-left-color: #ef7b7b;
}

#leaveDrill.quiet {
  margin-top: 26px;
}

.result h2 {
  font-size: 34px;
}

@media (max-width: 1000px) {
  .playing,
  .learn {
    grid-template-columns: 1fr;
  }

  .lessons {
    position: static;
  }
}