/**
 * Blackjack Basic Strategy Trainer — /tools/blackjack-basic-strategy-trainer/
 *
 * Scoped to #btf-bj-trainer. The design: a tinted panel holding a paper shell
 * — felt table with playing cards, bordered play buttons with key hints, a
 * tinted result card — and a folded rules line underneath. Colours map onto
 * the theme's tokens; the two verdict tints are this component's own.
 */

#btf-bj-trainer {
	--bj-page: var( --bg2 ); --bj-paper: var( --surface ); --bj-ink: var( --ink ); --bj-muted: var( --ink3 ); --bj-line: var( --bg3 ); --bj-soft: var( --bg2 );
	--bj-brand: var( --felt ); --bj-brand-ink: var( --on-dark ); --bj-felt: #1B4535; --bj-felt-ink: #F8F5E9;
	--bj-ok-bg: #E9F3EB; --bj-ok: #266342; --bj-error-bg: #FBEFEA; --bj-error: #9B4832;
	margin: 1.6rem 0 0; color: var( --bj-ink );
}
#btf-bj-trainer .bj-study { background: var( --bj-page ); padding: 28px; border-radius: 20px; font: 400 15px/1.5 'Outfit', sans-serif; color: var( --bj-ink ); }
#btf-bj-trainer .bj-study * { box-sizing: border-box; }
#btf-bj-trainer button, #btf-bj-trainer select { font: inherit; cursor: pointer; }
#btf-bj-trainer button:disabled { cursor: default; }
#btf-bj-trainer button, #btf-bj-trainer select, #btf-bj-trainer summary { -webkit-tap-highlight-color: transparent; }
#btf-bj-trainer [hidden] { display: none !important; }
#btf-bj-trainer button:focus-visible, #btf-bj-trainer select:focus-visible, #btf-bj-trainer summary:focus-visible { outline: 2px solid var( --bj-brand ); outline-offset: 2px; }

/* ── header and toolbar ─────────────────────────────────────────────────── */
#btf-bj-trainer .bj-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
#btf-bj-trainer .bj-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var( --bj-muted ); font-weight: 500; }
#btf-bj-trainer .bj-title { margin: 2px 0 0; font: 400 30px/1.15 'Instrument Serif', serif; letter-spacing: -.02em; color: var( --bj-ink ); }
#btf-bj-trainer .bj-hand-count { color: var( --bj-muted ); font-size: 13px; font-variant-numeric: tabular-nums; }
#btf-bj-trainer .bj-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
#btf-bj-trainer .bj-filter { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var( --bj-muted ); }
#btf-bj-trainer .bj-filter select, #btf-bj-trainer .bj-rule select {
	color: var( --bj-ink ); border: 1px solid var( --bj-line ); border-radius: 8px; padding: 8px 26px 8px 10px; font-size: 13px; height: 38px;
	-webkit-appearance: none; appearance: none;   /* WebKit ignores min-height on a native select; drawing it ourselves keeps the 44px tap target on phones */
	background: var( --bj-paper ) url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%236B6258' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>" ) no-repeat right 10px center;
}

/* ── the shell and the table ────────────────────────────────────────────── */
#btf-bj-trainer .bj-shell { background: var( --bj-paper ); border: 1px solid var( --bj-line ); border-radius: 18px; overflow: hidden; }
#btf-bj-trainer .bj-table { background: var( --bj-felt ); color: var( --bj-felt-ink ); padding: 26px 26px 24px; text-align: center; display: grid; grid-template-columns: 1fr 1.3fr; align-items: start; gap: 20px; }
#btf-bj-trainer .bj-table-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; opacity: .8; margin-bottom: 9px; }
#btf-bj-trainer .bj-cards { display: flex; justify-content: center; gap: 9px; }
#btf-bj-trainer .bj-playing-card { width: 68px; height: 94px; border-radius: 7px; background: #FFFDF6; color: #24382D; position: relative; box-shadow: 0 3px 5px rgba( 6, 29, 37, .14 ); text-align: left; font-family: 'Instrument Serif', Georgia, serif; }
#btf-bj-trainer .bj-playing-card.bj-red-suit { color: #AC493D; }
#btf-bj-trainer .bj-corner { position: absolute; left: 9px; top: 6px; font-size: 20px; line-height: 1; }
#btf-bj-trainer .bj-corner small { display: block; font-size: 13px; text-align: center; margin-top: 3px; }
#btf-bj-trainer .bj-bottom { left: auto; top: auto; bottom: 6px; right: 9px; transform: rotate( 180deg ); }
#btf-bj-trainer .bj-pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; }
#btf-bj-trainer .bj-pip, #btf-bj-trainer .bj-corner small { font-family: 'Times New Roman', Georgia, serif; }   /* Instrument Serif has no suit glyphs; pin the fallback so pips look the same everywhere */
#btf-bj-trainer .bj-dealer-group { border-right: 1px solid rgba( 163, 181, 168, .3 ); padding-right: 20px; }
#btf-bj-trainer .bj-player-cards .bj-playing-card:first-child { transform: rotate( -4deg ); }
#btf-bj-trainer .bj-player-cards .bj-playing-card:last-child { transform: rotate( 4deg ); }
#btf-bj-trainer .bj-hand-title { margin-top: 11px; font-size: 17px; font-weight: 500; }
#btf-bj-trainer .bj-hand-kind { opacity: .75; font-size: 12px; margin-left: 6px; font-weight: 400; }

/* ── the decision ───────────────────────────────────────────────────────── */
#btf-bj-trainer .bj-decision { padding: 20px 22px 0; }
#btf-bj-trainer .bj-decision-title { font-size: 13px; color: var( --bj-muted ); margin: 0 0 9px; }
#btf-bj-trainer .bj-actions { display: grid; grid-template-columns: repeat( var( --bj-cols, 3 ), minmax( 0, 1fr ) ); gap: 8px; }
#btf-bj-trainer .bj-action { min-height: 60px; border-radius: 10px; border: 1px solid var( --bj-line ); background: var( --bj-paper ); color: var( --bj-ink ); padding: 8px; display: flex; align-items: center; justify-content: center; gap: 12px; transition: background 140ms, border-color 140ms; }
#btf-bj-trainer .bj-action:hover:enabled { background: var( --bj-soft ); border-color: var( --bj-muted ); }
#btf-bj-trainer .bj-action-name { font-size: 16px; font-weight: 500; }
#btf-bj-trainer kbd { font: 400 11px/1.4 'JetBrains Mono', monospace; color: var( --bj-muted ); border: 1px solid var( --bj-line ); border-radius: 4px; padding: 2px 5px; }
#btf-bj-trainer .bj-action small { display: block; font-size: 11px; font-weight: 400; margin-top: 2px; }
#btf-bj-trainer .bj-action.bj-correct { background: var( --bj-ok-bg ); border-color: var( --bj-ok ); color: var( --bj-ok ); }
#btf-bj-trainer .bj-action.bj-incorrect { background: var( --bj-error-bg ); border-color: var( --bj-error ); color: var( --bj-error ); }
#btf-bj-trainer .bj-action.bj-other { color: var( --bj-muted ); background: var( --bj-soft ); }

/* ── the result ─────────────────────────────────────────────────────────── */
#btf-bj-trainer .bj-feedback-slot { min-height: 153px; padding: 14px 22px 20px; }
#btf-bj-trainer .bj-result { min-height: 118px; border-radius: 10px; padding: 13px 15px; background: var( --bj-soft ); display: flex; flex-direction: column; gap: 6px; }
#btf-bj-trainer .bj-result[data-verdict="correct"] { background: var( --bj-ok-bg ); }
#btf-bj-trainer .bj-result[data-verdict="incorrect"] { background: var( --bj-error-bg ); }
#btf-bj-trainer .bj-result-title { margin: 0; font-size: 16px; font-weight: 500; color: var( --bj-ink ); }
#btf-bj-trainer .bj-mark { font: 400 .9em/1 system-ui, sans-serif; margin-right: .35em; }
#btf-bj-trainer .bj-result[data-verdict="correct"] .bj-result-title { color: var( --bj-ok ); }
#btf-bj-trainer .bj-result[data-verdict="incorrect"] .bj-result-title { color: var( --bj-error ); }
#btf-bj-trainer .bj-result-copy { margin: 0; font-size: 13px; color: var( --bj-muted ); }
#btf-bj-trainer .bj-result-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#btf-bj-trainer .bj-detail-button { color: var( --bj-ink ); background: transparent; border: 0; padding: 6px 0; font-size: 12px; text-align: left; text-decoration: underline; text-underline-offset: 3px; }
#btf-bj-trainer .bj-next { border: 0; background: var( --bj-brand ); color: var( --bj-brand-ink ); padding: 9px 13px; border-radius: 7px; font-size: 13px; white-space: nowrap; min-height: 38px; }
#btf-bj-trainer .bj-next:focus-visible { outline: 2px solid var( --bj-brand-ink ); outline-offset: -4px; }   /* focused after every keyboard answer: an inner ring, not a second border */
#btf-bj-trainer .bj-next:hover { background: var( --felt2 ); }
#btf-bj-trainer .bj-next span { margin-left: 10px; opacity: .8; }
#btf-bj-trainer .bj-waiting { display: flex; align-items: center; justify-content: center; height: 118px; color: var( --bj-muted ); font-size: 13px; }
#btf-bj-trainer .bj-details { border-top: 1px solid var( --bj-line ); margin-top: 10px; padding-top: 10px; font-size: 12px; color: var( --bj-ink ); }
#btf-bj-trainer .bj-details p { margin: 0 0 5px; font-size: 12px; line-height: 1.5; color: var( --bj-ink ); }   /* base.css styles bare <p> directly, so inheritance is not enough */

/* ── the rules, folded ──────────────────────────────────────────────────── */
#btf-bj-trainer .bj-rule-footer { margin-top: 14px; }
#btf-bj-trainer .bj-rule-footer summary { cursor: pointer; color: var( --bj-muted ); font-size: 12px; padding: 4px 0; }
#btf-bj-trainer .bj-rules { display: grid; grid-template-columns: repeat( auto-fit, minmax( 150px, 1fr ) ); gap: 10px 12px; margin-top: 10px; }
#btf-bj-trainer .bj-rule { display: flex; flex-direction: column; align-items: stretch; gap: 4px; font-size: 12px; color: var( --bj-muted ); }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 520px ) {
	#btf-bj-trainer .bj-study { padding: 17px 12px; border-radius: 12px; }
	#btf-bj-trainer .bj-title { font-size: 27px; }
	#btf-bj-trainer .bj-decision { padding: 16px 12px 0; }
	#btf-bj-trainer .bj-feedback-slot { padding: 12px; }
	#btf-bj-trainer .bj-table { padding: 22px 12px; gap: 12px; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.3fr ); }
	#btf-bj-trainer .bj-dealer-group { padding-right: 12px; }
	#btf-bj-trainer .bj-playing-card { width: 58px; height: 82px; }
	#btf-bj-trainer .bj-hand-kind { display: block; margin: 0; }
	#btf-bj-trainer .bj-actions { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	#btf-bj-trainer .bj-actions.bj-odd .bj-action:last-child { grid-column: 1 / -1; }
	#btf-bj-trainer .bj-action { min-height: 54px; }
	#btf-bj-trainer .bj-result-footer { flex-wrap: wrap; }
	#btf-bj-trainer .bj-next { margin-left: auto; }
}
@media ( pointer: coarse ) {
	#btf-bj-trainer .bj-next, #btf-bj-trainer .bj-detail-button { min-height: 44px; }
	#btf-bj-trainer .bj-filter select, #btf-bj-trainer .bj-rule select { height: 44px; }
	#btf-bj-trainer .bj-filter select, #btf-bj-trainer .bj-rule select { font-size: 16px; }   /* under 16px iOS zooms into the control */
	#btf-bj-trainer .bj-rule-footer summary { padding: 13px 0; }                             /* 44px tall with the text centred */
}
@media ( max-width: 360px ) {
	#btf-bj-trainer .bj-action { gap: 8px; padding: 8px 6px; }
	#btf-bj-trainer .bj-table-label { letter-spacing: .09em; white-space: nowrap; }
}
@media ( max-width: 340px ) {
	#btf-bj-trainer .bj-table-label { white-space: normal; }
}
@media ( prefers-reduced-motion: reduce ) {
	#btf-bj-trainer .bj-action { transition: none; }
}