/* ── Video poker odds — /video-poker/odds/ ──────────────────────────────────
   Rebuilt from the user's mock (2026-10-22) on the game guides' kit
   (video-poker-guide.css, body.btf-vpg-page): sections, heads, fields, the
   analyzer frame, cards, card picker, site table, toggles, figure tiles,
   meter, two columns, callouts, FAQ and next reads come from there. What's
   here is this mock's own: the hero's three-way split, the whole-game table's
   box, the band of three numbers, the draw calculator's layout, the common
   draws, the royal calculator and the game comparison, with their phone
   layouts. Markup: blocks/btf-vpo-*; script: assets/js/video-poker-odds.js.
   ──────────────────────────────────────────────────────────────────────── */

/* ── hero: what "winning" means ─────────────────────────────────────────── */
@media ( min-width: 960px ) {
	body.btf-vpo-page .vpo-split { justify-self: end; }
}
body.btf-vpo-page .vpo-split { width: 100%; max-width: 432px; padding: 1.7rem 1.7rem 1.45rem; }
body.btf-vpo-page .vpo-split .vpg-quads-label { font-size: .5625rem; }
body.btf-vpo-page .btf-vpg-hero .vpo-split .vpg-quads-title { margin: .75rem 0 0; font-size: 2rem; line-height: 1.14; }
body.btf-vpo-page .vpo-bar { display: flex; gap: 3px; height: 18px; margin: 1.3rem 0 1.05rem; overflow: hidden; background: rgba( 255, 255, 255, .04 ); border-radius: 3px; }
body.btf-vpo-page .vpo-bar i { display: block; height: 100%; min-width: 1px; }
body.btf-vpo-page .vpo-bar i.is-lose,
body.btf-vpo-page .vpo-stats .is-lose dt i { background: #A98575; }
body.btf-vpo-page .vpo-bar i.is-push,
body.btf-vpo-page .vpo-stats .is-push dt i { background: #C5A66A; }
body.btf-vpo-page .vpo-bar i.is-win,
body.btf-vpo-page .vpo-stats .is-win dt i { background: #B9CBB0; }
body.btf-vpo-page .vpo-stats { margin: 0 0 1.1rem; }
body.btf-vpo-page .vpo-stats > div { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; gap: 8px 15px; align-items: center; padding: .95rem 0; border-bottom: 1px solid rgba( 255, 255, 255, .13 ); }
body.btf-vpo-page .vpo-stats > div:last-child { border-bottom: 0; }
body.btf-vpo-page .vpo-stats dt { display: flex; align-items: center; gap: 9px; margin: 0; font: 400 .82rem/1.55 var( --sans ); color: #DFE6D9; }
body.btf-vpo-page .vpo-stats dt i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; }
body.btf-vpo-page .vpo-stats dd { margin: 0; font: 400 2.125rem/1.05 var( --serif ); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var( --cream ); white-space: nowrap; }
body.btf-vpo-page .vpo-stats dd span { margin-left: 3px; font: 400 .875rem/1 var( --sans ); letter-spacing: 0; color: #C8D3C1; }
body.btf-vpo-page .vpo-return { margin-top: .7rem; padding-top: 1.25rem; border-top: 1px solid rgba( 255, 255, 255, .19 ); }
body.btf-vpo-page .vpo-return strong { display: block; font: 400 1.75rem/1.15 var( --serif ); color: var( --cream ); }
body.btf-vpo-page .btf-vpg-hero .vpo-split .vpo-return-copy { margin: .45rem 0 1.05rem; font: 400 .75rem/1.8 var( --sans ); color: #D1DDCC; }
body.btf-vpo-page .btf-vpg-hero .vpo-split .vpo-split-fine { margin: 0; font: 400 .69rem/1.7 var( --sans ); color: #BECDB8; }

/* ── the whole-game table ───────────────────────────────────────────────── */
body.btf-vpo-page .vpo-dist { overflow: hidden; background: var( --paper ); border: 1px solid var( --line ); border-radius: 11px; }
body.btf-vpo-page .vpo-dist-controls { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.05rem 1.4rem; padding: 1.5rem; background: var( --cream ); }
body.btf-vpo-page .vpo-dist-controls > * { min-width: 0; }
body.btf-vpo-page .vpo-dist-game { flex: 1 1 330px; max-width: 530px; }
body.btf-vpo-page .vpo-dist-format .vpg-field-label { display: block; margin-bottom: 8px; font: 400 .75rem/1.6 var( --sans ); color: var( --muted ); }
body.btf-vpo-page .vpo-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font: 400 .75rem/1.5 var( --sans ); color: var( --muted ); cursor: pointer; }
body.btf-vpo-page .vpo-check input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var( --forest ); }
body.btf-vpo-page .btf-vpg-section .vpo-basis { margin: 0; padding: .8rem 1.5rem; border-top: 1px solid var( --line ); font-size: .69rem; line-height: 1.8; color: var( --muted ); }
body.btf-vpo-page .vpo-scroll { overflow-x: auto; border-top: 1px solid var( --line ); }
body.btf-vpo-page .prose .vpo-dist table.vpg-table { border: 0; border-radius: 0; }
body.btf-vpo-page .prose .vpo-odds-table td { white-space: nowrap; }
body.btf-vpo-page .prose .vpo-odds-table tr.is-none > * { background: #F4F0E8; color: var( --muted ); }
body.btf-vpo-page .prose .vpo-odds-table tfoot > tr > * { background: #E9EDDF; }
body.btf-vpo-page .vpo-dist .vpg-figs { border-bottom: 0; }
body.btf-vpo-page .btf-vpg-section .vpo-dist-note { margin: 0; padding: 1.05rem 1.45rem; border-top: 1px solid var( --line ); font-size: .69rem; line-height: 1.8; color: var( --muted ); }
body.btf-vpo-page .btf-vpg-section .vpo-dist-fine { margin: 1rem 0 0; }
body.btf-vpo-page .vpo-method { margin-top: 1.3rem; border-top: 1px solid var( --line ); }

/* ── three numbers ──────────────────────────────────────────────────────── */
body.btf-vpo-page .btf-vpg-section.vpg-band.vpo-terms-band { padding: .75rem 0; }   /* outranks the cream band's own padding */
body.btf-vpo-page .vpo-terms { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); }
body.btf-vpo-page .vpo-term { min-width: 0; padding: 1.6rem 1.5rem 1.6rem 0; }
body.btf-vpo-page .vpo-term + .vpo-term { padding-left: 1.5rem; border-left: 1px solid var( --line ); }
body.btf-vpo-page .vpo-term:last-child { padding-right: 0; }
body.btf-vpo-page .vpo-term .vpg-label { font-size: .5625rem; }
body.btf-vpo-page .prose .btf-vpg-section h3.vpo-term-title { margin: 0 0 .75rem; font: 400 1.81rem/1.15 var( --serif ); color: var( --forest ); }
body.btf-vpo-page .btf-vpg-section .vpo-term-copy { margin: 0; font-size: .875rem; line-height: 1.8; color: #4B5146; }

/* ── the draw calculator ────────────────────────────────────────────────── */
body.btf-vpo-page .vpo-draw-top { align-items: flex-end; }
body.btf-vpo-page .btf-vpg-section .vpo-draw-help { margin: .15rem 0 0; font-size: .82rem; line-height: 1.7; color: var( --muted ); }
body.btf-vpo-page .vpo-draw-table { flex: 0 0 240px; font-size: .75rem; }
body.btf-vpo-page .vpo-draw-presets { margin: 1.45rem 0 0; }
body.btf-vpo-page .vpo-draw-presets button { background: var( --cream ); border-color: var( --line ); }
body.btf-vpo-page .btf-vpg-section .vpo-selection { margin: 0 0 1.5rem; text-align: center; font-size: .75rem; line-height: 1.7; color: var( --muted ); }
body.btf-vpo-page .vpo-draw-figs { overflow: hidden; border: 1px solid var( --line ); border-radius: 8px; }
body.btf-vpo-page .vpg-callout.vpo-verdict { margin: 1.2rem 0; }
body.btf-vpo-page .btf-vpg-section .vpo-explain { margin: 0 0 1.25rem; }
body.btf-vpo-page .vpo-outcomes { border-top: 1px solid var( --line ); }
body.btf-vpo-page .vpo-outcomes .vpg-holds-scroll { margin-bottom: .2rem; }
body.btf-vpo-page .prose .vpo-draw-table-out tr.is-zero > * { color: #767B6E; }
body.btf-vpo-page .btf-vpg-section .vpo-count-note { margin: .8rem 0 1.1rem; }
body.btf-vpo-page .btf-vpg-section .vpo-draw-foot { margin: 1.05rem 0 0; font-size: .75rem; }

/* ── common draws ───────────────────────────────────────────────────────── */
body.btf-vpo-page .vpo-ref-wrap { margin-bottom: 1.6rem; }
body.btf-vpo-page .prose .vpo-ref-table tbody th { padding-top: .85rem; padding-bottom: .85rem; }
body.btf-vpo-page .vpo-ref-name { display: block; font: 600 .875rem/1.5 var( --sans ); color: var( --forest ); }
body.btf-vpo-page .vpo-ref-cards { display: block; margin: .25rem 0 .1rem; font: 400 1.19rem/1.5 var( --serif ); letter-spacing: .04em; }
body.btf-vpo-page .vpo-ref-cards .vph-c { font-weight: 400; }
body.btf-vpo-page .vpo-ref-toss { display: block; font: 400 .625rem/1.6 var( --sans ); color: var( --muted ); }
body.btf-vpo-page .vpo-ref-toss .vph-c { font-weight: 500; }
body.btf-vpo-page .prose .vpo-ref-table td:nth-child( 2 ) { text-align: left; font-family: var( --sans ); }
body.btf-vpo-page .vpo-ref-callout { margin-top: 0; }

/* ── the royal calculator ───────────────────────────────────────────────── */
body.btf-vpo-page .vpo-royal { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.07fr ); gap: 2.2rem; align-items: stretch; }
body.btf-vpo-page .vpo-royal-in { min-width: 0; padding: 1.6rem; background: var( --paper ); border: 1px solid var( --line ); border-radius: 10px; }
body.btf-vpo-page .vpo-royal-in .vpg-field + .vpg-field { margin-top: 1.1rem; }
body.btf-vpo-page .btf-vpg-section .vpo-royal-error { margin: .75rem 0 0; padding-left: .75rem; border-left: 2px solid var( --red ); font-size: .75rem; line-height: 1.7; color: var( --red ); }
body.btf-vpo-page .vpo-royal-presets { margin: 1.1rem 0; }
body.btf-vpo-page .btf-vpg-section .vpo-royal-fine { margin: 0; font-size: .69rem; line-height: 1.8; }
body.btf-vpo-page .vpo-royal-out { min-width: 0; padding: 1.8rem 1.85rem; background: var( --forest ); border: 1px solid #1D382A; border-radius: 10px; color: var( --cream ); }
body.btf-vpo-page .vpo-royal-out .vpg-label { margin: 0; font-size: .5625rem; color: #D1BD90; }
body.btf-vpo-page .vpo-royal-out > strong { display: block; margin: 1rem 0 1.4rem; font: 400 4.375rem/1.04 var( --serif ); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var( --cream ); }
body.btf-vpo-page .vpo-royal-metrics { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 22px; margin: 1.5rem 0 0; }
body.btf-vpo-page .vpo-royal-metrics > div + div { padding-left: 22px; border-left: 1px solid rgba( 255, 255, 255, .15 ); }
body.btf-vpo-page .vpo-metric-label { display: block; font: 400 .69rem/1.7 var( --sans ); color: #BDCDB6; }
body.btf-vpo-page .vpo-royal-metrics b { display: block; margin-top: 8px; font: 400 1.875rem/1.1 var( --serif ); font-variant-numeric: tabular-nums; color: var( --cream ); }
body.btf-vpo-page .btf-vpg-section .vpo-royal-basis { margin: 1.05rem 0 0; font-size: .82rem; line-height: 1.8; color: #D1DDCA; }
body.btf-vpo-page .btf-vpg-section .vpo-royal-thresh { margin: 1rem 0 0; padding-top: .95rem; border-top: 1px solid rgba( 255, 255, 255, .15 ); font-size: .75rem; line-height: 1.8; color: #D1DDCA; }
body.btf-vpo-page .btf-vpg-section .vpo-royal-thresh:empty { display: none; }
body.btf-vpo-page .vpo-royal-notes { margin-top: 2.2rem; }
body.btf-vpo-page .btf-vpg-section .vpo-royal-formula { margin: 1.6rem 0 0; }
body.btf-vpo-page .vpo-royal-formula sup { font-size: .75em; line-height: 0; }

/* ── the game comparison ────────────────────────────────────────────────── */
body.btf-vpo-page .prose .vpo-games-table tbody th { padding-top: .35rem; padding-bottom: .35rem; }
body.btf-vpo-page .prose a.vpo-game-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: var( --forest ); font: 500 .84rem/1.4 var( --sans ); text-decoration: none; }
body.btf-vpo-page .prose a.vpo-game-link:hover { text-decoration: underline; text-underline-offset: 4px; }
body.btf-vpo-page .btf-vpg-section .vpo-games-fine { margin: .7rem 0 0; font-size: .69rem; }
body.btf-vpo-page .vpo-games-cols { margin-top: 2rem; }
body.btf-vpo-page .vpg-callout.vpo-games-callout { margin-top: 2rem; }

/* ── narrower ───────────────────────────────────────────────────────────── */
@media ( max-width: 1000px ) {
	body.btf-vpo-page .vpo-split { padding: 1.5rem 1.3rem 1.3rem; }
	body.btf-vpo-page .vpo-dist-controls { padding: 1.3rem; gap: 1rem; }
	body.btf-vpo-page .vpo-term { padding-right: 1.25rem; }
	body.btf-vpo-page .vpo-term + .vpo-term { padding-left: 1.25rem; }
	body.btf-vpo-page .vpo-royal { gap: 1.55rem; }
	body.btf-vpo-page .vpo-royal-out > strong { font-size: 3.9rem; }
}
@media ( max-width: 959px ) {
	body.btf-vpo-page .vpo-split { max-width: 520px; padding: 1.6rem; }
	body.btf-vpo-page .vpo-stats dd { font-size: 2.375rem; }
}
@media ( max-width: 760px ) {
	body.btf-vpo-page .vpo-dist-game { flex-basis: 100%; max-width: none; }
	body.btf-vpo-page .vpo-term { padding: 1.45rem 1.05rem 1.45rem 0; }
	body.btf-vpo-page .vpo-term + .vpo-term { padding-left: 1.05rem; }
	body.btf-vpo-page .prose .btf-vpg-section h3.vpo-term-title { font-size: 1.69rem; }
	body.btf-vpo-page .btf-vpg-section .vpo-term-copy { font-size: .82rem; }
	body.btf-vpo-page .vpo-draw-top { flex-direction: column; align-items: stretch; gap: .95rem; }
	body.btf-vpo-page .vpo-draw-table { flex-basis: auto; max-width: 340px; }
	body.btf-vpo-page .vpo-royal { grid-template-columns: 1fr; gap: 1.25rem; }
	body.btf-vpo-page .vpo-royal-out > strong { font-size: 4.25rem; }
}
@media ( max-width: 620px ) {
	/* the common draws and the game comparison become labelled cards rather than scroll sideways */
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) thead { display: none; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ),
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) tbody { display: block; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) tr { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: .7rem 1rem; padding: .95rem 1rem 1.05rem; border-top: 1px solid var( --rule ); }
	body.btf-vpo-page .prose .vpo-games-table tr { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) tr:first-child { border-top: 0; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) tbody th { grid-column: 1 / -1; padding: 0; border: 0; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) td { display: block; padding: 0; border: 0; text-align: left; font-size: .8rem; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) td::before { content: attr( data-label ); display: block; margin-bottom: .2rem; font: 400 .56rem/1.5 var( --mono ); letter-spacing: .1em; text-transform: uppercase; white-space: normal; color: var( --muted ); }
	body.btf-vpo-page .prose .vpo-games-table tbody th { margin-bottom: -.35rem; }
}
@media ( max-width: 560px ) {
	body.btf-vpo-page .vpo-terms { grid-template-columns: 1fr; }
	body.btf-vpo-page .vpo-term,
	body.btf-vpo-page .vpo-term + .vpo-term { padding: 1.35rem 0; border-left: 0; }
	body.btf-vpo-page .vpo-term + .vpo-term { border-top: 1px solid var( --line ); }
	body.btf-vpo-page .prose .btf-vpg-section h3.vpo-term-title { font-size: 1.81rem; }
	body.btf-vpo-page .vpo-dist .vpg-figs { grid-template-columns: 1fr; }
	body.btf-vpo-page .vpo-dist .vpg-fig + .vpg-fig { border-left: 0; border-top: 1px solid var( --line ); }
}
@media ( max-width: 480px ) {
	body.btf-vpo-page .vpo-split { padding: 1.5rem 1.3rem 1.3rem; }
	body.btf-vpo-page .btf-vpg-hero .vpo-split .vpg-quads-title { font-size: 1.94rem; }
	body.btf-vpo-page .vpo-stats dt { font-size: .75rem; }
	body.btf-vpo-page .vpo-stats dd { font-size: 2.19rem; }
	body.btf-vpo-page .vpo-stats > div { gap: 8px 12px; padding: .875rem 0; }
	body.btf-vpo-page .vpo-return strong { font-size: 1.75rem; }
	body.btf-vpo-page .btf-vpg-hero .vpo-split .vpo-return-copy { font-size: .69rem; }
	body.btf-vpo-page .btf-vpg-hero .vpo-split .vpo-split-fine { font-size: .625rem; }
	body.btf-vpo-page .vpo-dist-controls { padding: 1.2rem 1rem; }
	body.btf-vpo-page .btf-vpg-section .vpo-basis { padding: .75rem 1rem; font-size: .625rem; }
	body.btf-vpo-page .prose .vpo-odds-table thead th { padding: .55rem .5rem; font-size: .5rem; }
	body.btf-vpo-page .prose .vpo-odds-table tbody th,
	body.btf-vpo-page .prose .vpo-odds-table tfoot th,
	body.btf-vpo-page .prose .vpo-odds-table td { padding: .55rem .5rem; font-size: .72rem; }
	body.btf-vpo-page .btf-vpg-section .vpo-dist-note { padding: 1rem; }
	body.btf-vpo-page .vpo-draw-presets button { padding: 8px 9px; font-size: .69rem; }
	body.btf-vpo-page .btf-vpg-section .vpo-selection { font-size: .69rem; margin-bottom: 1.2rem; }
	body.btf-vpo-page .vpo-royal-in { padding: 1.3rem 1.1rem; }
	body.btf-vpo-page .vpo-royal-out { padding: 1.55rem 1.4rem; }
	body.btf-vpo-page .vpo-royal-out > strong { font-size: 3.875rem; }
	body.btf-vpo-page .vpo-royal-metrics { gap: 16px; }
	body.btf-vpo-page .vpo-royal-metrics > div + div { padding-left: 16px; }
	body.btf-vpo-page .vpo-royal-metrics b { font-size: 1.75rem; }
	body.btf-vpo-page .vpo-metric-label { font-size: .625rem; }
	body.btf-vpo-page .btf-vpg-section .vpo-royal-thresh { font-size: .69rem; }
}
@media ( max-width: 350px ) {
	body.btf-vpo-page .vpo-split { padding: 1.3rem 1.05rem; }
	body.btf-vpo-page .btf-vpg-hero .vpo-split .vpg-quads-title { font-size: 1.75rem; }
	body.btf-vpo-page .vpo-stats dt { font-size: .69rem; }
	body.btf-vpo-page .vpo-stats dd { font-size: 1.94rem; }
	body.btf-vpo-page .vpo-dist-controls { padding: 1.05rem .9rem; }
	body.btf-vpo-page .prose .vpo-odds-table thead th,
	body.btf-vpo-page .prose .vpo-odds-table tbody th,
	body.btf-vpo-page .prose .vpo-odds-table tfoot th,
	body.btf-vpo-page .prose .vpo-odds-table td { padding-left: .35rem; padding-right: .35rem; }
	body.btf-vpo-page .prose .vpo-odds-table td { font-size: .66rem; }
	body.btf-vpo-page .prose :is( .vpo-ref-table, .vpo-games-table ) tr { padding-left: .8rem; padding-right: .8rem; gap: .7rem .7rem; }
	body.btf-vpo-page .vpo-royal-out { padding: 1.45rem 1.2rem; }
	body.btf-vpo-page .vpo-royal-out > strong { font-size: 3.5rem; }
	body.btf-vpo-page .vpo-royal-metrics { gap: 12px; }
	body.btf-vpo-page .vpo-royal-metrics > div + div { padding-left: 12px; }
	body.btf-vpo-page .vpo-royal-metrics b { font-size: 1.56rem; }
}

/* ── print: the whole page, not the kit's chart-only print ──────────────── */
@media print {
	body.btf-vpo-page .hero,
	body.btf-vpo-page .btf-vpg-section:not( #chart ),
	body.btf-vpo-page .btf-th-summary { display: block !important; }
	body.btf-vpo-page .btf-vpg-section { padding: 1.4rem 0 !important; border-bottom: 1px solid #ccc !important; }
	body.btf-vpo-page .hero,
	body.btf-vpo-page .vpg-fig.is-dark,
	body.btf-vpo-page .vpo-royal-out,
	body.btf-vpo-page .btf-th-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	body.btf-vpo-page .vpg-hero-cta,
	body.btf-vpo-page .vpo-dist-controls,
	body.btf-vpo-page .vpo-draw-presets,
	body.btf-vpo-page .vpg-actions,
	body.btf-vpo-page .vpg-change,
	body.btf-vpo-page .vpo-royal-presets,
	body.btf-vpo-page .vpg-picker { display: none !important; }
	body.btf-vpo-page .vpo-dist,
	body.btf-vpo-page .vpo-draw-figs,
	body.btf-vpo-page .vpo-royal { break-inside: avoid; }
}