/* ============================================================
   Card visuals in articles: [bji_hands] example hands and the
   [bji_soft_demo] interactive hand (inc/hand-demo.php, js/hand-demo.js).
   The card is the Hand Calculator's .card-face (hand-calculator.css);
   its rules are repeated here scoped to .hdemo-card so this page does
   not load the calculator sheet. Keep the two in step.
   ============================================================ */
.av2-prose .hdemo-card {
  display: block;
  width: 52px; height: 74px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--bji-gray-300);
  box-shadow: var(--bji-shadow-sm);
  position: relative;
  font-weight: var(--bji-weight-black);
  color: var(--bji-navy-900);
  flex: none;
}
.av2-prose .hdemo-card .r { position: absolute; top: 5px; left: 7px; font-size: 1.05rem; line-height: 1; }
.av2-prose .hdemo-card .p { position: absolute; bottom: 5px; right: 7px; font-size: 1.05rem; line-height: 1; }
.av2-prose .hdemo-card .mid { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.av2-prose .hdemo-card.red { color: var(--bji-red-500); }
.av2-prose .hdemo-card.empty { background: var(--bji-surface-sunken); border: 1px dashed var(--bji-border-strong); box-shadow: none; }

/* a card and the value it is counted at, underneath */
.av2-prose .hdemo-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.av2-prose .hdemo-slot { display: grid; justify-items: center; gap: 4px; }
.av2-prose .hdemo-v {
  min-width: 28px;
  padding: 1px 6px;
  border-radius: var(--bji-radius-pill);
  background: var(--bji-gray-100);
  color: var(--bji-text-muted);
  font-size: var(--bji-text-xs);
  font-weight: var(--bji-weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.av2-prose .hdemo-v.ace { background: var(--bji-blue-100); color: var(--bji-blue-800); }
.av2-prose .hdemo-v.drop { animation: hdemo-drop 1.2s var(--bji-ease); }
@keyframes hdemo-drop {
  0%, 40% { background: var(--bji-amber-500); color: var(--bji-navy-900); transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .av2-prose .hdemo-v.drop { animation: none; }
}

/* ---- example hands ([bji_hands]) ---- */
.av2-prose .hdemo-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bji-space-4) var(--bji-space-6, 2rem);
  margin: 0 0 var(--bji-space-5);
}
.av2-prose .hdemo-ex { margin: 0; display: grid; justify-items: start; gap: var(--bji-space-2); }
.av2-prose .hdemo-label {
  margin: 0;
  font-size: var(--bji-text-sm);
  font-weight: var(--bji-weight-bold);
  color: var(--bji-navy-900);
  text-align: left;
}
.av2-prose .hdemo-label.soft { color: var(--bji-blue-700); }

/* ---- interactive demo ([bji_soft_demo]) ---- */
.av2-prose .hdemo {
  margin: 0 0 var(--bji-space-5);
  padding: var(--bji-space-4);
  background: var(--bji-surface);
  border: 1px solid var(--bji-border);
  border-radius: var(--bji-radius-lg);
  box-shadow: var(--bji-shadow-sm);
}
.av2-prose .hdemo-hand { min-height: 100px; }
.av2-prose .hdemo-read { margin: var(--bji-space-3) 0 var(--bji-space-4); min-height: 4.6em; }
.av2-prose .hdemo-total { margin: 0; display: flex; align-items: baseline; gap: var(--bji-space-2); line-height: 1.1; }
.av2-prose .hdemo-total .n { font-size: var(--bji-text-3xl); font-weight: var(--bji-weight-black); color: var(--bji-navy-900); font-variant-numeric: tabular-nums; }
.av2-prose .hdemo-total .t { font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--bji-text-muted); }
.av2-prose .hdemo-total .t.soft { color: var(--bji-blue-600); }
.av2-prose .hdemo-total .t.bust { color: var(--bji-red-700); }
.av2-prose .hdemo-note { margin: var(--bji-space-1, 4px) 0 0; font-size: var(--bji-text-sm); color: var(--bji-text-muted); }

/* rank tiles: the calculator's .rank look */
.av2-prose .hdemo-ranks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.av2-prose .hdemo-rank,
.av2-prose .hdemo-btn,
.av2-prose .hdemo-chip {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--bji-border-strong);
  background: var(--bji-surface);
  color: var(--bji-navy-900);
  border-radius: var(--bji-radius-sm);
  transition: all var(--bji-duration-fast) var(--bji-ease);
}
.av2-prose .hdemo-rank { min-height: 40px; padding: 0; font-size: var(--bji-text-sm); font-weight: var(--bji-weight-bold); }
.av2-prose .hdemo-rank:hover:not(:disabled),
.av2-prose .hdemo-btn:hover:not(:disabled),
.av2-prose .hdemo-chip:hover { border-color: var(--bji-blue-400); background: var(--bji-blue-050); }
.av2-prose .hdemo-rank:focus-visible,
.av2-prose .hdemo-btn:focus-visible,
.av2-prose .hdemo-chip:focus-visible { outline: 2px solid var(--bji-blue-500); outline-offset: 1px; }
.av2-prose .hdemo button:disabled { opacity: .45; cursor: not-allowed; }
.av2-prose .hdemo-actions { display: flex; flex-wrap: wrap; gap: var(--bji-space-2); margin-top: var(--bji-space-3); }
.av2-prose .hdemo-btn { min-height: 40px; padding: 0 var(--bji-space-4); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); }
.av2-prose .hdemo-btn.primary { background: var(--bji-navy-900); border-color: var(--bji-navy-900); color: #fff; }
.av2-prose .hdemo-btn.primary:hover:not(:disabled) { background: var(--bji-navy-700); border-color: var(--bji-navy-700); }
.av2-prose .hdemo-presets {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bji-space-2);
  margin-top: var(--bji-space-4); padding-top: var(--bji-space-3);
  border-top: 1px solid var(--bji-border);
}
.av2-prose .hdemo-presets .k { font-size: var(--bji-text-xs); font-weight: var(--bji-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--bji-text-muted); }
.av2-prose .hdemo-chip { min-height: 36px; padding: 0 var(--bji-space-3); border-radius: var(--bji-radius-pill); font-size: var(--bji-text-sm); font-weight: var(--bji-weight-semibold); }

@media (max-width: 560px) {
  .av2-prose .hdemo { padding: var(--bji-space-3); }
  .av2-prose .hdemo-ranks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .av2-prose .hdemo-rank { min-height: 44px; }
  .av2-prose .hdemo-row { gap: var(--bji-space-4); }
  .av2-prose .hdemo-row .hdemo-card { width: 44px; height: 63px; }
  .av2-prose .hdemo-row .hdemo-card .r, .av2-prose .hdemo-row .hdemo-card .p { font-size: .9rem; }
  .av2-prose .hdemo-row .hdemo-card .mid { font-size: 1.25rem; }
}