/* A single upright rank and vector-suit system for every teaching example. */
:root{--card-red:#a94f40;--card-red-on-dark:#d98e79}
.card-rank,.card-notation,.poker-hand,.hands-line b{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-synthesis:none;
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
  letter-spacing:0;
}
.card-rank{display:inline-flex;align-items:center;justify-content:center;min-width:.7em;line-height:1}
.card-suit{display:block;flex:none;width:1em;height:1em;overflow:visible}
.card-notation{display:inline-flex;align-items:center;justify-content:center;gap:.1em;line-height:1;white-space:nowrap;vertical-align:middle}
.card-notation>.card-suit{width:.69em;height:.76em}
.card-notation[data-suit="heart"]>.card-suit,.card-notation[data-suit="diamond"]>.card-suit{color:var(--card-red)}
.case-blackboard .card-notation[data-suit="heart"]>.card-suit,.case-blackboard .card-notation[data-suit="diamond"]>.card-suit{color:var(--card-red-on-dark)}
.poker-hand,.hands-line b.poker-hand{display:inline-flex;align-items:center;gap:.45em;line-height:1.25;white-space:nowrap}
.hands-line b.poker-hand{font-size:24px;color:#ece7d8}
.playing-card{
  font-family:var(--sans);
  font-style:normal;
  font-weight:500;
  font-variant-numeric:lining-nums tabular-nums;
  letter-spacing:0;
  gap:6px;
  padding:7px 2px;
}
.playing-card>.card-rank{font-size:inherit;flex:none}
.playing-card>.card-suit{width:16px;height:18px}
.playing-card.red-suit{color:var(--card-red)!important}
.case-controls button{display:flex;align-items:center;justify-content:center;gap:.55em}
.case-controls .card-notation{font-size:1.12em}
.case-controls button[aria-pressed="true"] .card-notation[data-suit="heart"]>.card-suit,
.case-controls button[aria-pressed="true"] .card-notation[data-suit="diamond"]>.card-suit{color:var(--card-red)}
.case-reading-label .card-notation{font-size:1.08em;margin-right:.18em}
.case-table tbody th .poker-hand{font-size:.91em}
@media(max-width:540px){
  .hands-line b.poker-hand{font-size:23px}
  .playing-card{gap:5px;padding-block:6px}
  .playing-card>.card-suit{width:15px;height:17px}
  .five-cards .playing-card>.card-suit{width:14px;height:16px}
}
@media(max-width:360px){
  .hands-line{gap:17px}
  .hands-line b.poker-hand{font-size:21px;gap:.38em}
  .five-cards .playing-card{gap:4px;padding-block:5px}
  .five-cards .playing-card>.card-suit{width:12px;height:14px}
}