/* Poker hand rankings: drawn cards, the list, the quiz, the counts. */
.cards { display: flex; gap: 6px; }
.c { width: 44px; height: 62px; border-radius: 6px; background: #fbf7ef; color: #1b1814; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 700 19px/1 var(--sans); letter-spacing: -.03em; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 4px 10px rgba(0, 0, 0, .3); border: 1px solid rgba(0, 0, 0, .12); }
.c i { font-style: normal; font-size: 19px; margin-top: 3px; font-family: "Apple Symbols", "Segoe UI Symbol", var(--sans); }
.c.r { color: #b3262e; }
.c.k { opacity: .74; }
@media (min-width: 700px) { .c { width: 50px; height: 70px; font-size: 21px; } .c i { font-size: 21px; } }

.prose ol.hands { list-style: none; padding: 0; margin-top: 22px; display: grid; gap: 14px; }
.prose ol.hands > li + li { margin-top: 0; }
.hand { padding: 18px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid var(--hair); display: grid; gap: 4px; }
.prose .hand h3 { margin-top: 14px; font-size: 22px; display: flex; align-items: baseline; gap: 10px; }
.hand h3 .n { font: 600 13px/1 var(--sans); color: var(--brass); min-width: 1.4em; }
.prose .hand p { margin-top: 2px; }
.hand .odds { margin-top: 6px !important; font-size: 14px; color: var(--muted); }
.hand .odds span { margin: 0 6px; }
.hand .odds b { color: var(--brass-lt); font-weight: 650; white-space: nowrap; }
@media (min-width: 760px) {
  .hand { grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; }
  .hand .cards { grid-row: 1 / span 3; }
  .prose .hand h3 { margin-top: 0; }
}

/* the quiz */
.quiz-wrap { margin-top: clamp(52px, 8vw, 72px); }
.quiz-wrap h2 { font-size: clamp(26px, 3.4vw, 32px); font-weight: 700; scroll-margin-top: 90px; }
.quiz-sub { margin-top: 10px; }
.quiz { margin-top: 20px; padding: 20px 18px 18px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 0%, var(--felt-hi), var(--felt) 70%);
  border: 1px solid rgba(201, 162, 94, .3); box-shadow: inset 0 0 0 6px rgba(0, 0, 0, .12); }
.quiz[hidden] { display: none; }
.q-hands { display: grid; gap: 16px; }
@media (min-width: 640px) { .q-hands { grid-template-columns: 1fr 1fr; } }
.q-hand { padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, .16); transition: box-shadow .2s ease; }
.q-hand.win { box-shadow: inset 0 0 0 2px var(--brass-lt); }
.q-label { font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brass-lt); margin-bottom: 10px; }
.q-hand .cards { gap: 5px; }
.q-hand .c { width: 100%; max-width: 50px; flex: 1; }
.q-name { min-height: 1.5em; margin-top: 10px; font-size: 14.5px; color: var(--cream); }
.q-picks { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 16px; }
.q-picks button, .q-next { appearance: none; min-height: 48px; border-radius: 999px; font: 600 15px/1 var(--serif); cursor: pointer;
  border: 1.5px solid var(--ink); background: var(--cream); color: var(--ink); }
.q-picks button:hover { background: #fff; }
.q-picks button[disabled] { cursor: default; opacity: .55; }
.q-picks button.correct { opacity: 1; background: var(--brass); }
.q-picks button.wrong { opacity: .8; text-decoration: line-through; }
.quiz .rail { margin-top: 18px; max-width: none; }
.quiz .rail p { font-size: 16px; }
.q-foot { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.q-score { font-size: 14px; color: var(--soft); }
.q-next { padding: 0 20px; background: var(--brass); }
.q-next:hover { background: var(--brass-lt); }

/* the counts table */
table.counts { border-collapse: collapse; width: 100%; min-width: 600px; font: 400 15px/1.3 var(--sans); font-variant-numeric: tabular-nums; margin-top: 8px; }
table.counts th, table.counts td { padding: 10px 8px; border-top: 1px solid var(--hair); text-align: right; }
table.counts thead th { font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass); border-top: 0; vertical-align: bottom; }
table.counts tbody th, table.counts thead th:first-child { text-align: left; color: var(--cream); padding-left: 0; }
table.counts tbody th { font-weight: 650; }
table.counts td { color: var(--soft); }
table.counts tr.total th, table.counts tr.total td { border-top: 1px solid rgba(201, 162, 94, .45); color: var(--cream); }