/**
 * Blackjack Strategy Calculator — /tools/blackjack-strategy-calculator/
 *
 * Scoped to #btf-bj-calc so nothing here can reach the rest of the site.
 * Reads top to bottom the way a hand does: dealer's card, your cards, the
 * answer. Rules are folded away, the chart and the edge come after.
 */

#btf-bj-calc {
	--bjc-hit: #8B2D2D; --bjc-stand: #1B3A2D; --bjc-double: #92700A; --bjc-split: #1A3A6B; --bjc-sur: #5A5A5A;
	--bjc-felt: #1B3A2D; --bjc-felt-2: #24493A;
	margin: 1.6rem 0 0; font-size: 1rem;
}

#btf-bj-calc .bjc-intro { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.5; color: var( --ink-2, #4A463E ); }
#btf-bj-calc .bjc-h3 { font-family: var( --serif, Georgia, serif ); font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; margin: 0 0 .35rem; color: var( --ink, #22201C ); }
#btf-bj-calc .bjc-h3.on-felt { color: var( --cream, #F7F3E8 ); }
#btf-bj-calc .bjc-sub { margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; color: var( --ink-2, #4A463E ); }

/* ── the table (felt) ───────────────────────────────────────────────────── */
#btf-bj-calc .bjc-table {
	background: radial-gradient( ellipse at 50% 0%, var( --bjc-felt-2 ), var( --bjc-felt ) 70% );
	border-radius: 18px; padding: 1.4rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem;
	box-shadow: inset 0 0 0 1px rgba( 247, 243, 232, .08 );
}
#btf-bj-calc .bjc-divider { height: 1px; background: rgba( 247, 243, 232, .14 ); margin: .2rem 0; }
#btf-bj-calc .bjc-row { display: grid; grid-template-columns: 10.5rem 1fr; gap: 1rem; align-items: center; }
#btf-bj-calc .bjc-row-head { display: flex; align-items: center; gap: .8rem; }
#btf-bj-calc .bjc-row-label { font-family: var( --mono, monospace ); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba( 247, 243, 232, .75 ); line-height: 1.3; }

/* the chosen card, drawn as a card */
#btf-bj-calc .bjc-slot { width: 2.6rem; height: 3.5rem; flex-shrink: 0; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba( 0, 0, 0, .35 ), inset 0 0 0 1px rgba( 0, 0, 0, .06 ); }
#btf-bj-calc .bjc-slot b { font-family: var( --serif, Georgia, serif ); font-weight: 600; font-size: 1.35rem; color: var( --ink, #22201C ); }

/* the rank strip */
#btf-bj-calc .bjc-ranks { display: flex; flex-wrap: wrap; gap: .35rem; }
#btf-bj-calc .bjc-rank {
	font-family: var( --serif, Georgia, serif ); font-size: .98rem; font-weight: 500; min-width: 2.3rem; padding: .48rem .25rem;
	background: rgba( 247, 243, 232, .12 ); border: 1px solid rgba( 247, 243, 232, .18 ); border-radius: 7px;
	color: var( --cream, #F7F3E8 ); cursor: pointer; transition: all .12s;
}
#btf-bj-calc .bjc-rank:hover { background: rgba( 247, 243, 232, .22 ); transform: translateY( -1px ); }
#btf-bj-calc .bjc-rank.on { background: #fff; border-color: var( --gold-soft, #C9A24A ); color: var( --ink, #22201C ); font-weight: 700; box-shadow: 0 0 0 2px var( --gold-soft, #C9A24A ); }

/* ── the answer ─────────────────────────────────────────────────────────── */
#btf-bj-calc .bjc-answer {
	margin-top: 1rem; display: grid; grid-template-columns: 11rem 1fr; gap: 1.4rem; align-items: start;
	padding: 1.4rem 1.5rem; background: var( --cream-2, #F3EEE2 ); border: 1px solid var( --hair, #E0D9C9 ); border-radius: 18px;
}
#btf-bj-calc .bjc-badge {
	display: flex; align-items: center; justify-content: center; min-height: 7rem; border-radius: 14px; color: #fff;
	font-family: var( --serif, Georgia, serif ); font-weight: 500; font-size: 2.3rem; letter-spacing: -.02em; text-align: center; padding: .5rem;
}
#btf-bj-calc .a-hit { background: var( --bjc-hit ); } #btf-bj-calc .a-stand { background: var( --bjc-stand ); }
#btf-bj-calc .a-double { background: var( --bjc-double ); } #btf-bj-calc .a-split { background: var( --bjc-split ); }
#btf-bj-calc .a-surrender { background: var( --bjc-sur ); } #btf-bj-calc .a-natural { background: var( --bjc-double ); }
#btf-bj-calc .bjc-answer-body { min-width: 0; }
#btf-bj-calc .bjc-hand { display: block; font-family: var( --mono, monospace ); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted, #7A7367 ); margin-bottom: .45rem; }
#btf-bj-calc .bjc-why { margin: 0; font-size: 1.08rem; line-height: 1.55; color: var( --ink, #22201C ); }

#btf-bj-calc .bjc-details { margin-top: .9rem; }
#btf-bj-calc .bjc-details > summary { cursor: pointer; font-family: var( --mono, monospace ); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var( --forest, #1B3A2D ); list-style: none; }
#btf-bj-calc .bjc-details > summary::-webkit-details-marker { display: none; }
#btf-bj-calc .bjc-details > summary::after { content: ' ▾'; }
#btf-bj-calc .bjc-details[open] > summary::after { content: ' ▴'; }
#btf-bj-calc .bjc-evs { margin-top: .8rem; display: flex; flex-direction: column; gap: .4rem; }
#btf-bj-calc .bjc-ev { display: grid; grid-template-columns: 5.5rem 1fr 4rem; gap: .8rem; align-items: center; }
#btf-bj-calc .bjc-ev-k { font-size: .85rem; color: var( --ink-2, #4A463E ); }
#btf-bj-calc .bjc-ev.is-best .bjc-ev-k { font-weight: 700; color: var( --ink, #22201C ); }
#btf-bj-calc .bjc-ev-bar { position: relative; height: 14px; background: var( --cream-3, #E8E1D2 ); border-radius: 4px; overflow: hidden; }
#btf-bj-calc .bjc-ev-bar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var( --hair, #C9C0AC ); }
#btf-bj-calc .bjc-ev-bar i { position: absolute; top: 0; bottom: 0; display: block; }
#btf-bj-calc .bjc-ev-bar i.pos { background: var( --bjc-stand ); border-radius: 0 4px 4px 0; }
#btf-bj-calc .bjc-ev-bar i.neg { background: var( --bjc-hit ); border-radius: 4px 0 0 4px; }
#btf-bj-calc .bjc-ev-v { font-family: var( --mono, monospace ); font-size: .76rem; text-align: right; color: var( --ink-2, #4A463E ); }
#btf-bj-calc .bjc-ev.is-best .bjc-ev-v { font-weight: 700; color: var( --ink, #22201C ); }
#btf-bj-calc .bjc-evnote { margin: .7rem 0 0; font-size: .8rem; line-height: 1.5; color: var( --muted, #7A7367 ); }

/* ── rules, folded ──────────────────────────────────────────────────────── */
#btf-bj-calc .bjc-rules-wrap { margin-top: .9rem; border: 1px solid var( --hair, #E0D9C9 ); border-radius: 12px; background: #fff; }
#btf-bj-calc .bjc-rules-wrap > summary { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: .85rem 1.1rem; cursor: pointer; list-style: none; }
#btf-bj-calc .bjc-rules-wrap > summary::-webkit-details-marker { display: none; }
#btf-bj-calc .bjc-rules-k { font-family: var( --mono, monospace ); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var( --muted, #7A7367 ); }
#btf-bj-calc .bjc-rules-summary { flex: 1; font-size: .9rem; color: var( --ink, #22201C ); min-width: 12rem; }
#btf-bj-calc .bjc-rules-change { font-family: var( --mono, monospace ); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; color: var( --forest, #1B3A2D ); padding: .35rem .7rem; border: 1px solid var( --forest, #1B3A2D ); border-radius: 6px; }
#btf-bj-calc .bjc-rules-wrap[open] .bjc-rules-change { background: var( --forest, #1B3A2D ); color: var( --cream, #F7F3E8 ); }
#btf-bj-calc .bjc-rules { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: flex-end; padding: .4rem 1.1rem 1.1rem; border-top: 1px solid var( --hair, #E0D9C9 ); }
#btf-bj-calc .bjc-rule { display: flex; flex-direction: column; gap: .3rem; }
#btf-bj-calc .bjc-rule > span { font-family: var( --mono, monospace ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --muted, #7A7367 ); }
#btf-bj-calc .bjc-rule select { font: inherit; font-size: .92rem; padding: .45rem .6rem; border: 1px solid var( --hair, #E0D9C9 ); border-radius: 8px; background: #fff; color: var( --ink, #22201C ); min-width: 8.5rem; }
#btf-bj-calc .bjc-check { flex-direction: row; align-items: center; gap: .45rem; padding-bottom: .5rem; }
#btf-bj-calc .bjc-check span { font-family: inherit; font-size: .9rem; text-transform: none; letter-spacing: 0; color: var( --ink-2, #4A463E ); }
#btf-bj-calc .bjc-check input { width: 1.05rem; height: 1.05rem; accent-color: var( --forest, #1B3A2D ); }

/* ── chart ──────────────────────────────────────────────────────────────── */
#btf-bj-calc .bjc-chartwrap { margin-top: 2.2rem; }
#btf-bj-calc .bjc-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; }
#btf-bj-calc .bjc-tab { font: inherit; font-size: .85rem; padding: .5rem .9rem; background: var( --cream-2, #F3EEE2 ); border: 1px solid var( --hair, #E0D9C9 ); border-radius: 8px; cursor: pointer; color: var( --ink-2, #4A463E ); }
#btf-bj-calc .bjc-tab.active { background: var( --forest, #1B3A2D ); border-color: var( --forest, #1B3A2D ); color: var( --cream, #F7F3E8 ); font-weight: 600; }
#btf-bj-calc .bjc-chart { overflow-x: auto; }
#btf-bj-calc .bjc-table-grid { width: 100%; border-collapse: separate; border-spacing: 2px; min-width: 30rem; }
#btf-bj-calc .bjc-table-grid th { font-family: var( --mono, monospace ); font-size: .68rem; font-weight: 600; color: var( --ink-2, #4A463E ); padding: .35rem; }
#btf-bj-calc .bjc-table-grid thead th { background: var( --cream-2, #F3EEE2 ); border-radius: 4px; }
#btf-bj-calc .bjc-table-grid td { text-align: center; padding: .42rem .2rem; border-radius: 4px; font-family: var( --mono, monospace ); font-size: .74rem; font-weight: 700; color: #fff; }
#btf-bj-calc .c-hit { background: var( --bjc-hit ); } #btf-bj-calc .c-stand { background: var( --bjc-stand ); }
#btf-bj-calc .c-double { background: var( --bjc-double ); } #btf-bj-calc .c-split { background: var( --bjc-split ); }
#btf-bj-calc .c-surrender { background: var( --bjc-sur ); }
#btf-bj-calc .bjc-key { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .8rem; font-family: var( --mono, monospace ); font-size: .62rem; letter-spacing: .05em; text-transform: uppercase; color: var( --muted, #7A7367 ); }
#btf-bj-calc .bjc-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
#btf-bj-calc .k-hit { background: var( --bjc-hit ); } #btf-bj-calc .k-stand { background: var( --bjc-stand ); }
#btf-bj-calc .k-double { background: var( --bjc-double ); } #btf-bj-calc .k-split { background: var( --bjc-split ); }
#btf-bj-calc .k-surrender { background: var( --bjc-sur ); }

/* ── house edge ─────────────────────────────────────────────────────────── */
#btf-bj-calc .bjc-edge { margin-top: 2rem; padding: 1.4rem 1.5rem; background: var( --forest, #1B3A2D ); border-radius: 18px; color: var( --cream, #F7F3E8 ); }
#btf-bj-calc .bjc-edge-wait { margin: .4rem 0 0; font-family: var( --mono, monospace ); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba( 247, 243, 232, .6 ); }
#btf-bj-calc .bjc-edge-top { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
#btf-bj-calc .bjc-edge-top b { font-family: var( --serif, Georgia, serif ); font-weight: 400; font-size: 2.6rem; line-height: 1; }
#btf-bj-calc .bjc-edge-sub { flex: 1; min-width: 14rem; font-size: .9rem; line-height: 1.5; color: rgba( 247, 243, 232, .75 ); }
#btf-bj-calc .bjc-flips-k { margin: 1.2rem 0 .2rem; font-family: var( --mono, monospace ); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --gold-soft, #C9A24A ); }
#btf-bj-calc .bjc-flips { display: grid; grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) ); gap: .3rem 1.6rem; }
#btf-bj-calc .bjc-flip { display: grid; grid-template-columns: 1fr 4.5rem; gap: .6rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid rgba( 247, 243, 232, .12 ); font-size: .9rem; }
#btf-bj-calc .bjc-flip b { font-family: var( --mono, monospace ); font-size: .84rem; text-align: right; }
#btf-bj-calc .bjc-flip b.good { color: #7FBF8F; } #btf-bj-calc .bjc-flip b.bad { color: #E08A8A; }
#btf-bj-calc .bjc-edge-note { margin: 1.1rem 0 0; font-size: .78rem; line-height: 1.55; color: rgba( 247, 243, 232, .6 ); }

/* ── text selection on the dark panels ──────────────────────────────────── */
/* base.css gives every panel a faint green tint with ink-dark text, and only
   overrides it for .section-felt and .hero. Same gold-on-dark treatment here. */
#btf-bj-calc .bjc-table ::selection, #btf-bj-calc .bjc-table::selection,
#btf-bj-calc .bjc-edge ::selection,  #btf-bj-calc .bjc-edge::selection,
#btf-bj-calc .bjc-badge ::selection, #btf-bj-calc .bjc-badge::selection,
#btf-bj-calc .bjc-tab.active::selection,
#btf-bj-calc .c-hit::selection, #btf-bj-calc .c-stand::selection, #btf-bj-calc .c-double::selection,
#btf-bj-calc .c-split::selection, #btf-bj-calc .c-surrender::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark, #F7F3E8 ); }
/* the white card and the chosen rank sit on the felt but are light themselves */
#btf-bj-calc .bjc-slot ::selection, #btf-bj-calc .bjc-rank.on::selection { background: rgba( 27, 58, 45, .15 ); color: var( --ink, #22201C ); }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media ( max-width: 700px ) {
	#btf-bj-calc .bjc-row { grid-template-columns: 1fr; gap: .55rem; }
	#btf-bj-calc .bjc-rank { min-width: 2.15rem; padding: .45rem .15rem; }
	#btf-bj-calc .bjc-answer { grid-template-columns: 1fr; gap: .9rem; }
	#btf-bj-calc .bjc-badge { min-height: 4.6rem; font-size: 2rem; }
	#btf-bj-calc .bjc-ev { grid-template-columns: 4.6rem 1fr 3.4rem; gap: .5rem; }
	#btf-bj-calc .bjc-rules-change { order: 3; }
}