/* Article illustrations stay independent of live game cards and table layout. */
.blv-figure,
.blv-figure * { box-sizing: border-box; }
.blv-figure {
  min-width: 0;
  max-width: 100%;
  margin: 14px 0 18px;
  padding: 12px;
  border: 1px solid #cdbf9f;
  border-radius: 12px;
  background: #fffaf0;
  color: #30291f;
  font-size: 15px;
  line-height: 1.6;
  white-space: normal;
  overflow-wrap: break-word;
}
.blv-figure figcaption { margin: 0 0 11px; color: #4e3b17; font-size: 15px; font-weight: 750; line-height: 1.6; }
.blv-figure .blv-note { margin: 10px 0 0; color: #665944; font-size: 14px; line-height: 1.7; white-space: normal; }
.blv-figure > .blv-note:first-of-type { margin-top: 0; }
.blv-figure .blv-callout { margin-top: 14px; padding: 10px; border-radius: 8px; background: #e4efea; color: #24574b; }
.blv-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 48px)); gap: 5px; width: 100%; max-width: 260px; }
.blv-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 61px;
  padding: 5px 1px;
  border: 1px solid #c9c0ad;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 2px 3px rgb(69 53 27 / 9%);
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans KR", sans-serif;
  line-height: 1;
}
.blv-card-rank { font-size: 21px; font-weight: 800; }
.blv-card-suit { font-size: 24px; font-weight: 600; }
.blv-card-red { color: #bc2339; }
.blv-card-black { color: #202934; }
.blv-card-label { margin: 14px 0 8px; color: #665944; font-size: 14px; line-height: 1.6; }
.blv-hole-cards { grid-template-columns: repeat(2, minmax(0, 48px)); }
.blv-card-back { border-color: #567c88; background: repeating-linear-gradient(45deg, #e0edf0, #e0edf0 4px, #f5fafb 4px, #f5fafb 8px); color: #24566a; font-size: 24px; font-weight: 750; }

.blv-seat-table {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 58px repeat(3, 66px) 58px;
  align-items: center;
  justify-items: center;
  gap: 5px;
  width: 100%;
  max-width: 360px;
  margin: 16px auto;
  isolation: isolate;
}
.blv-table-felt { position: absolute; z-index: -1; inset: 26px 30px; border: 4px solid #b9a06a; border-radius: 50%; background: #e4efea; box-shadow: inset 0 0 0 2px #fffaf0; }
.blv-seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; max-width: 88px; min-width: 0; min-height: 54px; padding: 5px 2px; border: 1px solid #c3b391; border-radius: 9px; background: #fffaf0; line-height: 1.4; }
.blv-seat strong { color: #30291f; font-size: 16px; font-weight: 800; white-space: nowrap; }
.blv-seat > span { color: #665944; font-size: 13px; white-space: nowrap; }
.blv-seat-button { border-color: #ad8134; background: #f3e0a6; }
.blv-seat-first { border-color: #4f8473; background: #e4efea; }
.blv-seat-top { grid-area: 1 / 2; }
.blv-seat-upper-right { grid-area: 2 / 3; }
.blv-seat-middle-right { grid-area: 3 / 3; }
.blv-seat-lower-right { grid-area: 4 / 3; }
.blv-seat-bottom { grid-area: 5 / 2; }
.blv-seat-lower-left { grid-area: 4 / 1; }
.blv-seat-middle-left { grid-area: 3 / 1; }
.blv-seat-upper-left { grid-area: 2 / 1; }
.blv-table-direction { grid-area: 2 / 2 / 5 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; color: #24574b; font-size: 13px; line-height: 1.5; text-align: center; white-space: nowrap; }
.blv-clockwise { font-size: 49px; line-height: 1; }
.blv-seat-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.blv-seat-legend li { display: flex; align-items: flex-start; gap: 6px; min-width: 0; margin: 0; font-size: 14px; line-height: 1.55; }
.blv-order-number { display: inline-flex; flex: 0 0 23px; align-items: center; justify-content: center; min-height: 23px; border-radius: 50%; background: #e4efea; color: #24574b; font-size: 13px; font-weight: 750; }
.blv-seat-legend strong { display: block; font-size: 14px; }
.blv-seat-full-name { display: block; color: #665944; font-size: 13px; }

.blv-flow { margin: 16px 0; padding: 0 0 0 12px; list-style: none; }
.blv-flow > li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 0 0 24px 23px; border-left: 2px solid #a2bfb2; }
.blv-flow > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.blv-flow > li > strong { font-size: 15px; line-height: 1.6; }
.blv-flow-number { position: absolute; top: 0; left: -13px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #24574b; color: #fff; font-size: 13px; font-weight: 750; line-height: 1; }
.blv-first-actor { display: block; color: #24574b; font-size: 14px; font-weight: 650; line-height: 1.7; }
.blv-flow-description { display: block; color: #665944; font-size: 14px; line-height: 1.7; }
.blv-action-block + .blv-action-block { margin-top: 20px; }
.blv-action-title { display: block; margin-bottom: 10px; color: #4e3b17; font-size: 15px; line-height: 1.7; }
.blv-action-sequence { display: flex; align-items: center; justify-content: flex-start; gap: 4px; min-width: 0; width: 100%; }
.blv-actor { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; max-width: 86px; min-height: 61px; padding: 6px 2px; border: 1px solid #cdbf9f; border-radius: 8px; background: #fff; text-align: center; }
.blv-actor strong { font-size: 16px; line-height: 1.45; white-space: nowrap; }
.blv-actor > span { color: #665944; font-size: 13px; line-height: 1.5; }
.blv-action-arrow { flex: 0 0 9px; color: #4f8473; font-size: 16px; font-weight: 750; line-height: 1; text-align: center; }
.blv-headsup { margin-top: 20px; padding: 12px 10px; border-radius: 9px; background: #e4efea; }
.blv-headsup .blv-action-title { color: #24574b; }
.blv-headsup-label { display: block; margin: 12px 0 6px; color: #24574b; font-size: 14px; font-weight: 650; }
.blv-headsup .blv-action-sequence { max-width: 210px; }

/* Worked hands use the same card scale, including in narrow nested panels. */
.blv-hand-row { min-width: 0; margin: 14px 0; }
.blv-hand-row:first-child { margin-top: 0; }
.blv-hand-row:last-child { margin-bottom: 0; }
.blv-hand-row > div { min-width: 0; }
.blv-hand-label,
.blv-result-label { display: block; margin-bottom: 8px; color: #4e3b17; font-size: 14px; font-weight: 700; line-height: 1.7; }
.blv-result-label { margin-top: 12px; }
.blv-two-cards .blv-cards { grid-template-columns: repeat(2, minmax(0, 48px)); max-width: 101px; }
.blv-one-card .blv-cards { grid-template-columns: minmax(0, 48px); max-width: 48px; }
.blv-card-emphasis { border: 2px solid #24574b; box-shadow: 0 0 0 2px #d9e8df; }
.blv-example-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.blv-example-grid + .blv-note.blv-callout { margin-top: 14px; }
.blv-mini-panel { min-width: 0; margin: 12px 0; padding: 12px 10px; border: 1px solid #d6cbb7; border-radius: 9px; background: #fffdf7; }
.blv-example-grid > .blv-mini-panel { margin: 0; }
.blv-panel-title { display: block; margin-bottom: 10px; color: #4e3b17; font-size: 15px; line-height: 1.7; }
.blv-equation { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; margin: 14px 0; padding: 10px 12px; border-left: 3px solid #4f8473; background: #e4efea; color: #24574b; font-size: 14px; line-height: 1.7; }
.blv-equation:last-child { margin-bottom: 0; }
.blv-equation strong { font-size: 15px; }
.blv-choice-flow { display: flex; flex-direction: column; gap: 0; margin: 14px 0 0; padding: 0; list-style: none; }
.blv-choice-flow li { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #d6cbb7; border-radius: 8px; background: #fffdf7; font-size: 14px; line-height: 1.7; }
.blv-choice-flow li + li::before { align-self: center; margin: -4px 0 5px; color: #24574b; content: "↓"; font-size: 20px; font-weight: 750; line-height: 1.4; }
.blv-choice-flow li + li { margin-top: 8px; }
.blv-choice-flow li > span { color: #665944; }
.blv-choice-flow li > strong { font-size: 15px; }
.blv-contributions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin: 14px 0; }
.blv-contributions > span { display: block; min-width: 0; padding: 8px 10px; border: 1px solid #d6cbb7; border-radius: 7px; background: #fffdf7; font-size: 14px; line-height: 1.7; }
.blv-contributions strong { margin-right: 4px; font-size: 16px; }
.blv-pot { min-width: 0; margin: 12px 0; padding: 12px 10px; border: 2px solid #739987; border-radius: 10px; background: #f4faf5; }
.blv-pot[data-blv-pot="side"],
.blv-pot[data-blv-pot="side-with-fold"] { border-color: #b79a64; background: #fff7e5; }
.blv-pot-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; margin-bottom: 10px; color: #30291f; font-size: 15px; line-height: 1.7; }
.blv-pot-title > span { font-size: 19px; font-weight: 800; }
.blv-chip-pieces { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.blv-chip-piece { display: block; min-width: 0; padding: 6px 9px; border: 1px solid #c6cbbc; border-radius: 6px; background: #fffdf7; color: #30291f; font-size: 14px; line-height: 1.6; }
.blv-pot-award { display: inline-block; margin-top: 4px; color: #24574b; font-size: 15px; font-weight: 750; }
.blv-payouts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; }
.blv-payouts > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px; border: 1px solid #d6cbb7; border-radius: 8px; background: #fffdf7; font-size: 14px; line-height: 1.7; }
.blv-payouts > div > strong { color: #30291f; font-size: 15px; }
.blv-payouts > div > span { color: #665944; }
.blv-return { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin: 14px 0; padding: 12px 10px; border: 2px dashed #739987; border-radius: 9px; background: #e4efea; color: #24574b; font-size: 14px; line-height: 1.7; }
.blv-return > strong { font-size: 15px; }
.blv-folded { border-color: #a39478; background: #eee9df; color: #4e4437; }

@media (min-width: 560px) {
  .blv-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 359px) {
  .blv-figure { padding: 10px; }
  .blv-action-sequence { gap: 3px; }
  .blv-action-arrow { flex-basis: 8px; }
  .blv-headsup { padding-right: 8px; padding-left: 8px; }
}