/* Strategy drill + card counting (Hi-Lo) */

.drill-options { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.drill-boxes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.drill-box { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 4px; text-align: center; }
.drill-box-n { font-size: 20px; font-weight: 750; font-variant-numeric: tabular-nums; }
.drill-box.b1 { border-color: rgba(242, 92, 84, 0.6); }
.drill-box.b2 { border-color: rgba(240, 180, 41, 0.6); }
.drill-box.b5 { border-color: rgba(63, 185, 80, 0.6); }
.drill-weak { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.drill-weak li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.drill-status .progress { margin-top: 8px; }

.drill-felt, .count-felt { padding: 18px 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 250px; justify-content: center; }
.drill-zone { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.drill-label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.drill-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.btn.drill-right, .btn.drill-right:disabled { opacity: 1; border-color: var(--green); background: rgba(63, 185, 80, 0.18); }
.btn.drill-wrong, .btn.drill-wrong:disabled { opacity: 1; border-color: var(--red); background: rgba(242, 92, 84, 0.16); }

/* card size variants (base .pcard lives in blackjack.css) */
.pcard.pcard-sm { width: 42px; height: 60px; font-size: 12px; }
.pcard.pcard-sm .pc-center { font-size: 20px; }
.pcard.pcard-lg { width: 96px; height: 136px; }
.pcard.pcard-lg .pc-center { font-size: 44px; }
.count-flash { gap: 12px; min-height: 140px; }
.count-flash > .pcard + .pcard { margin-left: 0 !important; }
.count-example { display: flex; flex-direction: column; gap: 6px; background: var(--felt-2); padding: 10px; border-radius: 10px; }
.count-example .bj-cards { justify-content: flex-start; min-height: 0; flex-wrap: wrap; }
.count-example .bj-cards > .pcard + .pcard { margin-left: 4px; }
.count-review { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.count-review-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }

.tc-q { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; }
.tc-tray-wrap { display: flex; flex-direction: column; gap: 6px; }
.tc-tray { position: relative; height: 180px; width: 90px; margin: 0 auto; border: 2px solid var(--border-2); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg-2); overflow: hidden; }
.tc-tray-fill { position: absolute; left: 0; right: 0; bottom: 0; background: repeating-linear-gradient(0deg, #e9e3d6 0 2px, #cfc6b3 2px 3px); }
.tc-tray-line { position: absolute; left: 0; right: 0; height: 1px; background: rgba(217, 174, 85, 0.6); }

.ix-felt { position: relative; }
.ix-tc { position: absolute; top: 12px; right: 14px; display: flex; flex-direction: column; align-items: center; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; padding: 4px 12px; }
.ix-tc b { font-size: 24px; color: var(--gold-2); }
.ix-choices .btn { flex: 1 1 140px; }

/* table integration (count practice on the blackjack table) */
.bj-count-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 8px 12px; border: 1px dashed var(--border-2); border-radius: 10px; background: var(--panel); font-size: 14px; margin-bottom: 12px; }
.bj-count-bar b { color: var(--gold-2); font-variant-numeric: tabular-nums; }
.bj-count-bar .check { font-size: 13px; }
.bj-count-dev { color: var(--purple); font-weight: 700; }

@media (max-width: 860px) {
  .tc-q { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .drill-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pcard.pcard-lg { width: 72px; height: 102px; }
  .pcard.pcard-lg .pc-center { font-size: 32px; }
  .ix-tc { position: static; }
  .drill-boxes { gap: 4px; }
}