/* ── Video poker max coin — /video-poker/strategy/max-coin/ ───────────────── Rebuilt from the user's mock (2026-10-26) on the game guides' kit (video-poker-guide.css, body.btf-vpg-page): sections, heads, fields, the glass hero panel, toggles, site tables, the green-hold cards, callouts, the FAQ and the next-read card come from there. What's here is this mock's own: the hero's royal row as bars, the credit table and its 3.2× note, the royal-row checker, the two-bet comparison, the returns table and its pay tables, the two strategy examples, and the four cases before "Max Bet", with their phone layouts. Markup: blocks/btf-vpmc-*; script: assets/js/video-poker-max-coin.js. ──────────────────────────────────────────────────────────────────────── */ /* ── hero: the conventional royal row ───────────────────────────────────── */ @media ( min-width: 960px ) { body.btf-vpmc-page .vpg-hero-grid { grid-template-columns: 1.1fr 1fr; } body.btf-vpmc-page .vpmc-row { justify-self: end; } } body.btf-vpmc-page .vpmc-row { width: 100%; max-width: 470px; padding: 1.625rem 1.75rem 1.44rem; } body.btf-vpmc-page .vpmc-row .vpg-quads-label { margin: 0; font-size: .5625rem; letter-spacing: .09em; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpg-quads-title { margin: .875rem 0 .94rem; font-size: 2rem; line-height: 1.1; letter-spacing: -.015em; } body.btf-vpmc-page .vpmc-row .vpg-quads-title em { color: #D4BA7D; } body.btf-vpmc-page .vpmc-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; height: 224px; padding: 0 6px; } body.btf-vpmc-page .vpmc-bar { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-width: 0; } body.btf-vpmc-page .vpmc-bar b { font: 400 .625rem/1.5 var( --mono ); color: #C3D0BC; } body.btf-vpmc-page .vpmc-bar i { display: block; width: 100%; max-width: 43px; background: #71826D; border-radius: 4px 4px 0 0; } body.btf-vpmc-page .vpmc-bar span { font: 400 .625rem/1.5 var( --mono ); color: #C3D0BC; } body.btf-vpmc-page .vpmc-bar.is-bonus i { background: #C6AA6E; } body.btf-vpmc-page .vpmc-bar.is-bonus b { color: #E1C992; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-axis { margin: .56rem 0 1.125rem; font: 400 .5rem/1.8 var( --mono ); text-align: center; color: #AFC0A7; } body.btf-vpmc-page .vpg-toggle.vpmc-credits { display: grid; grid-template-columns: repeat( 5, minmax( 0, 1fr ) ); gap: 6px; } body.btf-vpmc-page .vpg-toggle.vpmc-credits[hidden] { display: none; } body.btf-vpmc-page .vpmc-credits button { min-width: 0; padding: 5px 2px; background: transparent; border: 1px solid rgba( 255, 255, 255, .15 ); border-radius: 5px; color: #D5E0D0; font-size: .75rem; } body.btf-vpmc-page .vpmc-credits button:hover:not( [aria-pressed="true"] ):not( :disabled ) { background: rgba( 255, 255, 255, .05 ); border-color: #D0BD8D; } body.btf-vpmc-page .vpmc-credits button[aria-pressed="true"] { background: var( --cream ); border-color: var( --cream ); color: var( --forest ); font-weight: 600; } body.btf-vpmc-page .vpmc-row-out { display: flex; justify-content: space-between; gap: 20px; margin: 1.19rem 0 .75rem; padding-top: 1.06rem; border-top: 1px solid rgba( 255, 255, 255, .145 ); } body.btf-vpmc-page .vpmc-row-out > div + div { text-align: right; } body.btf-vpmc-page .vpmc-row-label { display: block; font: 400 .625rem/1.5 var( --sans ); color: #C0CDB8; } body.btf-vpmc-page .vpmc-row-out strong { font: 400 2.19rem/1.2 var( --serif ); font-variant-numeric: tabular-nums; white-space: nowrap; color: #E1C58A; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-row-rate { margin: 0 0 .7rem; font: 400 .69rem/1.8 var( --sans ); color: #D3DECC; } body.btf-vpmc-page .vpmc-row-rate strong { color: var( --cream ); font-weight: 600; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-row-fine { margin: 0; font: 400 .625rem/1.8 var( --sans ); color: #ADBEA4; } /* ── the royal can break the pattern ────────────────────────────────────── */ body.btf-vpmc-page .vpmc-box { min-width: 0; overflow: hidden; background: var( --paper ); border: 1px solid var( --line ); border-radius: 8px; } body.btf-vpmc-page .btf-vpg-section .vpmc-cap { margin: 0; padding: 1.06rem 1.25rem; background: var( --cream ); border-bottom: 1px solid var( --line ); font: 400 .625rem/1.7 var( --mono ); color: var( --muted ); } body.btf-vpmc-page .prose .vpmc-box table.vpg-table { border: 0; border-radius: 0; } body.btf-vpmc-page .prose .vpg-table tr.is-key th, body.btf-vpmc-page .prose .vpg-table tr.is-key td { background: #E9ECDF; color: var( --forest ); } body.btf-vpmc-page .vpmc-bonus-layout { display: grid; grid-template-columns: minmax( 0, 2.2fr ) minmax( 0, 1fr ); gap: 1.75rem; align-items: start; margin-bottom: 1.5rem; } body.btf-vpmc-page .prose .vpmc-credit-table td { white-space: nowrap; } body.btf-vpmc-page .prose .vpmc-credit-table tr.is-key td { font-weight: 400; } body.btf-vpmc-page .prose .vpmc-credit-table td strong { color: var( --forest ); font-weight: 700; } body.btf-vpmc-page .vpmc-note { min-width: 0; padding: 3px 0 3px 1.44rem; border-left: 2px solid var( --gold ); } body.btf-vpmc-page .vpmc-note-figure { display: block; font: 400 3.19rem/1.1 var( --serif ); font-variant-numeric: tabular-nums; color: var( --forest ); } body.btf-vpmc-page .btf-vpg-section .vpmc-note-copy { margin: .625rem 0 0; font-size: .75rem; line-height: 1.85; color: var( --muted ); } body.btf-vpmc-page .vpmc-note-copy strong { color: var( --forest ); font-weight: 500; } body.btf-vpmc-page .btf-vpg-section .vpmc-explain { max-width: 95ch; margin: 0 0 1.75rem; font-size: .875rem; line-height: 1.85; color: var( --muted ); } body.btf-vpmc-page .vpmc-explain strong { color: var( --forest ); font-weight: 600; } body.btf-vpmc-page .prose .btf-vpg-section .vpmc-explain a.vpg-inline-link:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { padding: 12px 0; margin: -12px 0; font-size: inherit; font-weight: 400; } body.btf-vpmc-page .vpmc-checker { display: grid; grid-template-columns: minmax( 0, .82fr ) minmax( 0, 1.45fr ); gap: 2rem; margin: 0 0 .94rem; padding: 1.69rem 1.8rem; background: #EEEEE2; border: 1px solid #D6D8C8; border-radius: 9px; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-checker-title { margin: 0 0 .75rem; font: 400 1.75rem/1.15 var( --serif ); color: var( --forest ); } body.btf-vpmc-page .btf-vpg-section .vpmc-checker-copy { margin: 0; font-size: .75rem; line-height: 1.8; color: #535D49; } body.btf-vpmc-page .vpmc-checker-copy strong { color: var( --forest ); font-weight: 600; } body.btf-vpmc-page .vpmc-check { min-width: 0; } body.btf-vpmc-page .vpmc-check-fields { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 11px; margin-bottom: 1.06rem; } body.btf-vpmc-page .vpmc-check-fields .vpg-field { min-width: 0; font-size: .69rem; } body.btf-vpmc-page .vpmc-check-fields input { height: 46px; padding: 9px 10px; font-size: .94rem; } body.btf-vpmc-page .vpmc-check-fields input[aria-invalid="true"] { border-color: var( --red ); } body.btf-vpmc-page .vpmc-check-btn { min-height: 44px; padding: 9px 15px; font-size: .75rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-check-result { margin: 1.125rem 0 0; padding-top: .94rem; border-top: 1px solid #D0D6C2; font-size: .82rem; line-height: 1.7; color: #535D49; } body.btf-vpmc-page .vpmc-check-result strong { display: block; margin-bottom: .375rem; color: var( --forest ); font-weight: 500; } body.btf-vpmc-page .btf-vpg-section .vpmc-check-result.is-error { color: var( --red ); } /* ── put a dollar amount on the difference ──────────────────────────────── */ body.btf-vpmc-page .prose .btf-vpg-section.vpmc-compare h2.btf-th-display { max-width: 790px; } body.btf-vpmc-page .btf-vpg-section .vpmc-intro { max-width: 790px; margin: 0 0 1.625rem; font-size: 1.06rem; line-height: 1.65; color: var( --muted ); } body.btf-vpmc-page .vpmc-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px; margin: 1.625rem 0 1.5rem; } body.btf-vpmc-page .vpmc-presets-label { font: 500 .75rem/1.4 var( --sans ); color: var( --muted ); } body.btf-vpmc-page .vpmc-presets .vpg-toggle { gap: 8px; } body.btf-vpmc-page .vpmc-presets .vpg-toggle button { padding: 10px 15px; background: var( --paper ); border-color: var( --line ); border-radius: 24px; font: 500 .82rem/1.4 var( --sans ); } body.btf-vpmc-page .vpmc-presets .vpg-toggle button:hover:not( [aria-pressed="true"] ):not( :disabled ) { background: var( --paper ); border-color: var( --forest ); } body.btf-vpmc-page .vpmc-presets .vpg-toggle button[aria-pressed="true"] { background: var( --forest ); border-color: var( --forest ); color: #FFF; } body.btf-vpmc-page .vpmc-hands { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 1.375rem; } body.btf-vpmc-page .vpmc-hands-label { font: 500 .875rem/1.4 var( --sans ); color: var( --th-ink ); } body.btf-vpmc-page .vpmc-hands-input, body.btf-vpmc-page .vpmc-controls .vpg-field :is( select, input ) { height: 46px; } body.btf-vpmc-page .vpmc-hands-input { width: 128px; padding: 11px 10px; background: #FFF; border: 1px solid #C7C3B9; border-radius: 5px; font: 400 1rem/1.4 var( --sans ); color: var( --th-ink ); } body.btf-vpmc-page .vpmc-hands-input[aria-invalid="true"], body.btf-vpmc-page .vpmc-controls [aria-invalid="true"] { border-color: var( --red ); outline: 1px solid var( --red ); } body.btf-vpmc-page .vpmc-hands-help { font-size: .75rem; color: var( --muted ); } body.btf-vpmc-page .vpmc-panels { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.25rem; align-items: start; } body.btf-vpmc-page .vpmc-panel { min-width: 0; overflow: hidden; background: var( --paper ); border: 1px solid var( --line ); border-radius: 12px; } body.btf-vpmc-page .vpmc-controls { min-width: 0; margin: 0; padding: 0 1.625rem 1.625rem; border: 0; } body.btf-vpmc-page .vpmc-legend { float: left; display: flex; align-items: center; gap: 10px; width: 100%; padding: 1.5rem 0 1.375rem; font: 500 1.125rem/1.4 var( --sans ); color: var( --forest ); } body.btf-vpmc-page .vpmc-legend + .vpg-field { clear: both; } body.btf-vpmc-page .vpmc-letter { display: inline-grid; place-items: center; width: 31px; height: 31px; border: 1px solid var( --gold ); border-radius: 50%; font: 500 .82rem/1 var( --mono ); color: var( --gold ); } body.btf-vpmc-page .vpmc-controls .vpg-field { font-size: .75rem; } body.btf-vpmc-page .vpmc-inputs { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 14px; margin: 1.19rem 0; } body.btf-vpmc-page .vpmc-dollar { position: relative; display: block; } body.btf-vpmc-page .vpmc-dollar > span { position: absolute; top: 50%; left: 11px; font: 400 .875rem/1 var( --sans ); color: var( --muted ); transform: translateY( -50% ); } body.btf-vpmc-page .vpmc-controls .vpmc-dollar input { padding-left: 26px; } body.btf-vpmc-page .vpmc-results { border-top: 1px solid var( --line ); } body.btf-vpmc-page .vpmc-stake { display: grid; grid-template-columns: minmax( 0, 1fr ) auto; align-items: center; padding: 1.3rem 1.625rem; background: #E9EDE5; } body.btf-vpmc-page .vpmc-stake-label { font: 500 .82rem/1.4 var( --sans ); color: var( --forest ); } body.btf-vpmc-page .vpmc-stake strong { font: 400 2.19rem/1.1 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var( --forest ); } body.btf-vpmc-page .vpmc-stake small { grid-column: 1 / -1; margin-top: 7px; font: 400 .625rem/1.5 var( --mono ); color: var( --muted ); } body.btf-vpmc-page .vpmc-list { margin: 0; padding: 0 1.625rem; } body.btf-vpmc-page .vpmc-list > div { display: flex; justify-content: space-between; gap: 14px; padding: 1.19rem 0; border-bottom: 1px solid var( --line ); } body.btf-vpmc-page .vpmc-list dt { margin: 0; font: 400 .82rem/1.45 var( --sans ); color: var( --th-ink ); } body.btf-vpmc-page .vpmc-list dt small { display: block; margin-top: 4px; font-size: .625rem; color: var( --muted ); } body.btf-vpmc-page .vpmc-list dd { flex-shrink: 0; margin: 0; padding-top: 2px; font: 500 .94rem/1.4 var( --mono ); white-space: nowrap; color: var( --forest ); } body.btf-vpmc-page .vpmc-net { padding: 1.44rem 1.625rem 1.56rem; } body.btf-vpmc-page .vpmc-net-label { display: block; font: 500 .69rem/1.4 var( --sans ); letter-spacing: .1em; text-transform: uppercase; color: var( --muted ); } body.btf-vpmc-page .vpmc-net strong { display: block; margin: .56rem 0 .5rem; font: 400 2.69rem/1.1 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var( --forest ); } body.btf-vpmc-page .vpmc-net strong.is-long { font-size: 2.1rem; } body.btf-vpmc-page .vpmc-net small { display: block; font-size: .75rem; line-height: 1.6; color: var( --muted ); } body.btf-vpmc-page .vpmc-paytable { margin: 0 1.625rem 1.44rem; padding-top: .94rem; border-top: 1px solid var( --line ); } body.btf-vpmc-page .vpmc-paytable > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; color: var( --forest ); font: 400 .75rem/1.5 var( --sans ); list-style: none; cursor: pointer; } body.btf-vpmc-page .vpmc-paytable > summary::-webkit-details-marker { display: none; } body.btf-vpmc-page .vpmc-paytable > summary::before { content: ''; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var( --forest ); transition: transform .15s; } body.btf-vpmc-page .vpmc-paytable[open] > summary::before { transform: rotate( 90deg ); } body.btf-vpmc-page .btf-vpg-section .vpmc-paytable-copy { margin: .5rem 0 .75rem; font-size: .69rem; line-height: 1.6; color: var( --muted ); } body.btf-vpmc-page .prose .vpmc-paytable-table thead th { padding: .55rem .75rem; font-size: .56rem; } body.btf-vpmc-page .prose .vpmc-paytable-table tbody th { padding: .45rem .75rem; font-size: .72rem; font-weight: 400; } body.btf-vpmc-page .prose .vpmc-paytable-table td { padding: .45rem .75rem; font-size: .72rem; white-space: nowrap; } body.btf-vpmc-page .btf-vpg-section .vpmc-error { margin: 1.25rem 0 0; } body.btf-vpmc-page .vpmc-verdict { margin: 1.375rem 0 0; padding: 1.5rem 1.69rem; background: var( --forest ); border-left: 3px solid var( --gold ); border-radius: 0 8px 8px 0; color: var( --paper ); } body.btf-vpmc-page .vpmc-verdict[hidden] { display: none; } body.btf-vpmc-page .vpmc-verdict-title { display: block; font: 400 1.625rem/1.2 var( --serif ); color: var( --cream ); } body.btf-vpmc-page .btf-vpg-section .vpmc-verdict-copy { margin: .625rem 0 0; font-size: .875rem; line-height: 1.75; color: #E4E9DF; } body.btf-vpmc-page .vpmc-notes { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: .8rem 1.56rem; margin-top: 1.375rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-notes-p { margin: 0; font-size: .75rem; line-height: 1.7; color: var( --muted ); } body.btf-vpmc-page .vpmc-notes-p strong { color: var( --th-ink ); font-weight: 500; } body.btf-vpmc-page .btf-vpg-section .vpmc-notes-p:last-child { grid-column: 1 / -1; padding-top: .94rem; border-top: 1px solid var( --line ); font-size: .69rem; } body.btf-vpmc-page .vpmc-noscript { margin-top: 1.25rem; } /* ── the same trade-off, a different price ──────────────────────────────── */ body.btf-vpmc-page .prose .vpmc-returns-table td { white-space: nowrap; } body.btf-vpmc-page .prose .vpmc-returns-table td:last-child { font-size: .72rem; color: var( --gold ); } body.btf-vpmc-page .prose .vpmc-returns-table tr[hidden] { display: none; } body.btf-vpmc-page .vpmc-more { display: flex; align-items: center; gap: .4rem; min-height: 44px; margin: 1.06rem auto 1.25rem; padding: 10px 19px; background: transparent; border: 1px solid #C8CCBC; border-radius: 6px; color: var( --forest ); font: 400 .75rem/1.4 var( --sans ); cursor: pointer; } body.btf-vpmc-page .vpmc-more:hover { background: var( --cream ); } body.btf-vpmc-page .vpmc-more[hidden] { display: none; } body.btf-vpmc-page .btf-vpg-section .vpmc-returns-fine { margin: 1.06rem 0 0; } body.btf-vpmc-page .vpmc-more:not( [hidden] ) + .vpmc-returns-fine { margin-top: 0; } body.btf-vpmc-page .vpmc-schedules { margin-top: 1.625rem; overflow: hidden; border: 1px solid var( --line ); border-radius: 8px; } body.btf-vpmc-page .vpmc-schedules > summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 1.125rem 1.44rem; background: var( --cream ); color: var( --forest ); font: 500 .875rem/1.5 var( --sans ); list-style: none; cursor: pointer; } body.btf-vpmc-page .vpmc-schedules > summary::-webkit-details-marker { display: none; } body.btf-vpmc-page .vpmc-schedules > summary::before { content: ''; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent var( --forest ); transition: transform .15s; } body.btf-vpmc-page .vpmc-schedules[open] > summary::before { transform: rotate( 90deg ); } body.btf-vpmc-page .vpmc-schedules-in { padding: 1.44rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-schedules-copy { margin: 0 0 1rem; font-size: .82rem; line-height: 1.75; color: var( --muted ); } body.btf-vpmc-page .vpmc-sched-field { max-width: 430px; margin-bottom: 1.25rem; } body.btf-vpmc-page .vpmc-schedules .vpg-fine { margin: .94rem 0 0; font-size: .69rem; } /* ── same five cards, a different best decision ─────────────────────────── */ body.btf-vpmc-page .vpg-toggle.vpmc-royal-switch { margin-bottom: 1.5rem; } body.btf-vpmc-page .vpg-toggle.vpmc-royal-switch[hidden] { display: none; } body.btf-vpmc-page .vpmc-royal-switch button { padding: 11px 18px; font-size: .75rem; } body.btf-vpmc-page .vpmc-examples { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.5rem; } body.btf-vpmc-page .vpmc-example { min-width: 0; padding: 1.625rem 1.75rem; background: var( --paper ); border: 1px solid var( --line ); border-radius: 9px; } body.btf-vpmc-page .vpmc-example .vpg-label { font-size: .5625rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-example-title { margin: .69rem 0 1.25rem; font: 400 1.81rem/1.15 var( --serif ); color: var( --forest ); } body.btf-vpmc-page .vpmc-hand { gap: 7px; margin-bottom: 1.3rem; } body.btf-vpmc-page .vpmc-hand .vpg-card { flex: 0 1 55px; width: 55px; height: 85px; background: #F5F0E6; border-color: #D4CFBF; border-radius: 5px; box-shadow: none; } body.btf-vpmc-page .vpmc-hand .vpg-card.is-held { background: #FCFBF5; border-color: #536E48; box-shadow: none; } body.btf-vpmc-page .vpmc-hand .vpg-card:not( .is-held ) { opacity: .56; } body.btf-vpmc-page .vpmc-hand .vpg-card.is-red { color: #973F39; } body.btf-vpmc-page .vpmc-hand .vpg-card-corner { left: 7px; } body.btf-vpmc-page .vpmc-hand .vpg-card-pip { top: 25px; font-size: 1.75rem; line-height: 1.2; } body.btf-vpmc-page .vpmc-hand .vpg-card-tag { padding: 3px 0; background: #E2DFD4; color: #6F6C60; font-size: .375rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-example-hold { margin: 0 0 1.06rem; font: 500 .875rem/1.5 var( --sans ); color: var( --forest ); } body.btf-vpmc-page .vpmc-example .vpmc-example-label { margin: 0; padding-bottom: .5rem; border-bottom: 1px solid var( --line ); } body.btf-vpmc-page .vpmc-hold { display: flex; justify-content: space-between; gap: 15px; padding: .56rem 0; font: 400 .75rem/1.5 var( --sans ); color: var( --muted ); } body.btf-vpmc-page .vpmc-hold strong { font: 400 .75rem/1.5 var( --mono ); } body.btf-vpmc-page .vpmc-hold.is-best { color: var( --forest ); } body.btf-vpmc-page .vpmc-hold.is-best strong { font-weight: 700; } body.btf-vpmc-page .btf-vpg-section .vpmc-example-note { margin: 1rem 0 0; font-size: .69rem; line-height: 1.8; color: var( --muted ); } body.btf-vpmc-page .btf-vpg-section .vpmc-strategy-fine { max-width: 100ch; margin: 1.125rem 0 1.625rem; } body.btf-vpmc-page .vpmc-odds { display: grid; grid-template-columns: minmax( 0, .8fr ) minmax( 0, 1.15fr ) minmax( 0, 1fr ); gap: 1.75rem; padding-top: 1.69rem; border-top: 1px solid #D3CDBF; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-odds-title { margin: 0; font: 400 1.69rem/1.15 var( --serif ); color: var( --forest ); } body.btf-vpmc-page .btf-vpg-section .vpmc-odds-copy { margin: 0; font-size: .75rem; line-height: 1.85; color: var( --muted ); } body.btf-vpmc-page .vpmc-odds-copy strong { color: var( --th-ink ); font-weight: 600; } /* ── before you press Max Bet ───────────────────────────────────────────── */ body.btf-vpmc-page .vpmc-case { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 3fr ); gap: 2.5rem; padding: 1.8rem 0; border-top: 1px solid var( --line ); } body.btf-vpmc-page .vpmc-case:last-child { padding-bottom: 0; } body.btf-vpmc-page .vpmc-case .vpmc-case-label { margin: 0; padding-top: 7px; font-size: .5625rem; } body.btf-vpmc-page .vpmc-case-body { min-width: 0; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-case-title { margin: 0 0 .8rem; font: 400 1.75rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpmc-page .btf-vpg-section .vpmc-case-copy { margin: 0; font-size: .875rem; line-height: 1.85; color: var( --muted ); } body.btf-vpmc-page .vpmc-case-copy strong { color: var( --th-ink ); font-weight: 600; } body.btf-vpmc-page .btf-vpg-section .vpmc-case-fine { margin: .8rem 0 0; font-size: .75rem; } /* ── narrower ───────────────────────────────────────────────────────────── */ @media ( max-width: 1000px ) { body.btf-vpmc-page .vpmc-row { padding: 1.5rem; } body.btf-vpmc-page .vpmc-bonus-layout { gap: 1.44rem; } body.btf-vpmc-page .vpmc-note { padding-left: 1.125rem; } body.btf-vpmc-page .vpmc-checker { grid-template-columns: minmax( 0, .8fr ) minmax( 0, 1.4fr ); gap: 1.44rem; padding: 1.56rem; } body.btf-vpmc-page .vpmc-example { padding: 1.5rem; } body.btf-vpmc-page .vpmc-odds { gap: 1.375rem; } body.btf-vpmc-page .vpmc-case { gap: 1.75rem; } } /* the hero stacks below 960px: the panel goes full width, text left and bars right (from 761px, where the five credit buttons still get 44px each; narrower, the panel keeps its phone layout) */ @media ( min-width: 761px ) and ( max-width: 959px ) { body.btf-vpmc-page .vpmc-row { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0 1.75rem; max-width: none; padding: 1.69rem 1.8rem; } body.btf-vpmc-page .vpmc-row > * { grid-column: 1; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpg-quads-title { font-size: 2.06rem; } body.btf-vpmc-page .vpmc-bars { grid-column: 2; grid-row: 1 / 6; align-self: end; height: 234px; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-axis { grid-column: 2; grid-row: 6; margin: .625rem 0 0; } body.btf-vpmc-page .vpg-toggle.vpmc-credits { margin-top: 3px; } body.btf-vpmc-page .vpmc-row-out { margin-top: 1.06rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-row-fine { grid-column: 1 / -1; margin-top: .75rem; } } @media ( max-width: 800px ) { body.btf-vpmc-page .vpmc-bonus-layout { grid-template-columns: 1fr; } body.btf-vpmc-page .vpmc-note { display: grid; grid-template-columns: 90px minmax( 0, 1fr ); align-items: center; gap: 0 14px; } body.btf-vpmc-page .vpmc-note-figure { font-size: 2.75rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-note-copy { margin: 0; font-size: .82rem; } body.btf-vpmc-page .vpmc-checker { grid-template-columns: 1fr; gap: 1.44rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-checker-title { font-size: 1.81rem; } body.btf-vpmc-page .vpmc-check-fields .vpg-field { font-size: .75rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-checker-copy { font-size: .82rem; } body.btf-vpmc-page .vpmc-examples { gap: 1.125rem; } body.btf-vpmc-page .vpmc-example { padding: 1.44rem 1.3rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-example-title { font-size: 1.69rem; } body.btf-vpmc-page .vpmc-hand { gap: 5px; } body.btf-vpmc-page .vpmc-hand .vpg-card { height: 78px; } body.btf-vpmc-page .vpmc-hand .vpg-card-corner { left: 5px; font-size: 1.25rem; } body.btf-vpmc-page .vpmc-hand .vpg-card-pip { font-size: 1.56rem; } body.btf-vpmc-page .vpmc-odds { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 1.25rem; } body.btf-vpmc-page .vpmc-odds-title { grid-column: 1 / -1; } body.btf-vpmc-page .vpmc-case { grid-template-columns: 1fr; gap: .625rem; } body.btf-vpmc-page .vpmc-case .vpmc-case-label { padding: 0; } } @media ( max-width: 760px ) { body.btf-vpmc-page .vpmc-panels { gap: 1rem; } body.btf-vpmc-page .vpmc-controls { padding: 0 1.125rem 1.375rem; } body.btf-vpmc-page .vpmc-legend { font-size: 1rem; } body.btf-vpmc-page .vpmc-list { padding: 0 1.125rem; } body.btf-vpmc-page .vpmc-stake { padding: 1.25rem 1.125rem; } body.btf-vpmc-page .vpmc-net { padding: 1.375rem 1.125rem; } body.btf-vpmc-page .vpmc-paytable { margin: 0 1.125rem 1.25rem; } body.btf-vpmc-page .vpmc-list > div { gap: 8px; } body.btf-vpmc-page .vpmc-list dd { font-size: .82rem; } body.btf-vpmc-page .vpmc-list dt { font-size: .75rem; } } @media ( max-width: 620px ) { body.btf-vpmc-page .vpmc-panels { grid-template-columns: 1fr; } body.btf-vpmc-page .btf-vpg-section .vpmc-intro { font-size: 1rem; } body.btf-vpmc-page .vpmc-presets { gap: 7px; } body.btf-vpmc-page .vpmc-presets-label { flex-basis: 100%; } body.btf-vpmc-page .vpmc-presets .vpg-toggle { gap: 7px; } body.btf-vpmc-page .vpmc-presets .vpg-toggle button { padding: 9px 12px; font-size: .75rem; } body.btf-vpmc-page .vpmc-hands { gap: 8px 12px; } body.btf-vpmc-page .vpmc-hands-help { flex-basis: 100%; } body.btf-vpmc-page .vpmc-hands-input { width: 118px; } body.btf-vpmc-page .vpmc-inputs { gap: 10px; } body.btf-vpmc-page .vpmc-list dd { font-size: .94rem; } body.btf-vpmc-page .vpmc-list dt { font-size: .82rem; } body.btf-vpmc-page .vpmc-verdict { padding: 1.3rem 1.25rem; } body.btf-vpmc-page .vpmc-verdict-title { font-size: 1.56rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-verdict-copy { font-size: .82rem; } body.btf-vpmc-page .vpmc-notes { grid-template-columns: 1fr; } body.btf-vpmc-page .btf-vpg-section .vpmc-notes-p:last-child { grid-column: 1; } body.btf-vpmc-page .vpmc-stake strong { font-size: 2.31rem; } body.btf-vpmc-page .vpmc-net strong { font-size: 2.625rem; } body.btf-vpmc-page .vpmc-net strong.is-long { font-size: 2rem; } /* the returns table: labelled cards rather than scroll sideways */ body.btf-vpmc-page .prose .vpmc-returns-table thead { display: none; } body.btf-vpmc-page .prose .vpmc-returns-table, body.btf-vpmc-page .prose .vpmc-returns-table tbody { display: block; } body.btf-vpmc-page .prose .vpmc-returns-table tr { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: .6rem 1rem; padding: .95rem 1rem 1rem; border-top: 1px solid var( --rule ); } body.btf-vpmc-page .prose .vpmc-returns-table tr[hidden] { display: none; } body.btf-vpmc-page .prose .vpmc-returns-table tr:first-child { border-top: 0; } body.btf-vpmc-page .prose .vpmc-returns-table tbody th { grid-column: 1 / -1; padding: 0; border: 0; } body.btf-vpmc-page .prose .vpmc-returns-table td { display: block; padding: 0; border: 0; text-align: left; font-size: .8rem; } body.btf-vpmc-page .prose .vpmc-returns-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 ); } } @media ( max-width: 600px ) { body.btf-vpmc-page .vpmc-row { padding: 1.5rem 1.44rem; } body.btf-vpmc-page .vpmc-row .vpg-quads-label { font-size: .5rem; } body.btf-vpmc-page .vpmc-bars { gap: 10px; } body.btf-vpmc-page .vpmc-credits button { font-size: .69rem; } body.btf-vpmc-page .vpmc-row-out strong { font-size: 2.25rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-row-rate { font-size: .75rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-row-fine { font-size: .69rem; } body.btf-vpmc-page .vpmc-note { grid-template-columns: 75px minmax( 0, 1fr ); padding-left: 1.125rem; } body.btf-vpmc-page .vpmc-note-figure { font-size: 2.5rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-note-copy { font-size: .75rem; } body.btf-vpmc-page .vpmc-checker { gap: 1.44rem; padding: 1.44rem 1.3rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-checker-title { font-size: 1.69rem; } body.btf-vpmc-page .vpmc-check-fields { grid-template-columns: 1fr; gap: .875rem; } body.btf-vpmc-page .vpmc-check-fields input { font-size: 1rem; } body.btf-vpmc-page .vpmc-check-btn { width: 100%; } body.btf-vpmc-page .vpmc-schedules > summary { padding: 1.06rem 1.2rem; font-size: .82rem; } body.btf-vpmc-page .vpmc-schedules-in { padding: 1.3rem 1.125rem; } body.btf-vpmc-page .vpg-toggle.vpmc-royal-switch { flex-wrap: nowrap; gap: 7px; } body.btf-vpmc-page .vpmc-royal-switch button { flex: 1; padding: 10px; font-size: .625rem; line-height: 1.65; } body.btf-vpmc-page .vpmc-examples { grid-template-columns: 1fr; } body.btf-vpmc-page .vpmc-example { padding: 1.56rem 1.44rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-example-title { font-size: 1.81rem; } body.btf-vpmc-page .vpmc-hand { gap: 7px; } body.btf-vpmc-page .vpmc-hand .vpg-card { flex-basis: 57px; width: 57px; height: 88px; } body.btf-vpmc-page .vpmc-hand .vpg-card-corner { left: 7px; font-size: 1.44rem; } body.btf-vpmc-page .vpmc-hand .vpg-card-pip { top: 27px; font-size: 1.81rem; } body.btf-vpmc-page .btf-vpg-section .vpmc-example-note { font-size: .75rem; } /* the credit table fits a phone with tight cells */ body.btf-vpmc-page .prose .vpmc-credit-table thead th { padding: .6rem .4rem; font-size: .56rem; } body.btf-vpmc-page .prose .vpmc-credit-table tbody th { padding: .7rem .4rem .7rem .75rem; font-size: .72rem; } body.btf-vpmc-page .prose .vpmc-credit-table td { padding: .7rem .4rem; font-size: .69rem; } body.btf-vpmc-page .prose .vpmc-credit-table :is( th, td ):last-child { padding-right: .75rem; } body.btf-vpmc-page .prose .vpmc-credit-table thead th:first-child { padding-left: .75rem; } body.btf-vpmc-page .prose .vpmc-credit-table :is( th, td ):not( :first-child ) { width: 14%; } body.btf-vpmc-page .vpmc-hold { font-size: .82rem; } body.btf-vpmc-page .vpmc-odds { grid-template-columns: 1fr; gap: 1rem; } body.btf-vpmc-page .vpmc-odds-title { grid-column: auto; } body.btf-vpmc-page .btf-vpg-section .vpmc-odds-copy { font-size: .82rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-case-title { font-size: 1.625rem; } } @media ( max-width: 400px ) { body.btf-vpmc-page .vpmc-row { padding: 1.375rem 1.19rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpg-quads-title { font-size: 1.875rem; } body.btf-vpmc-page .vpg-toggle.vpmc-credits { gap: 4px; } body.btf-vpmc-page .vpmc-credits button { font-size: .625rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpmc-axis { font-size: .44rem; } body.btf-vpmc-page .vpmc-hand { gap: 5px; } body.btf-vpmc-page .vpmc-hand .vpg-card { height: 82px; } body.btf-vpmc-page .vpmc-hand .vpg-card-corner { left: 6px; font-size: 1.31rem; } body.btf-vpmc-page .vpmc-hand .vpg-card-pip { top: 26px; font-size: 1.625rem; } body.btf-vpmc-page .vpmc-example { padding: 1.375rem 1.19rem; } body.btf-vpmc-page .prose .btf-vpg-section h3.vpmc-example-title { font-size: 1.625rem; } } @media ( max-width: 350px ) { body.btf-vpmc-page .vpmc-row { padding: 1.3rem 1rem; } body.btf-vpmc-page .btf-vpg-hero .vpmc-row .vpg-quads-title { font-size: 1.75rem; } body.btf-vpmc-page .vpmc-row .vpg-quads-label { font-size: .44rem; } body.btf-vpmc-page .vpmc-controls { padding-left: .875rem; padding-right: .875rem; } body.btf-vpmc-page .vpmc-stake, body.btf-vpmc-page .vpmc-net { padding-left: .875rem; padding-right: .875rem; } body.btf-vpmc-page .vpmc-list { padding-left: .875rem; padding-right: .875rem; } body.btf-vpmc-page .vpmc-paytable { margin-left: .875rem; margin-right: .875rem; } body.btf-vpmc-page .vpmc-net strong { font-size: 2.19rem; } body.btf-vpmc-page .vpmc-net strong.is-long { font-size: 1.69rem; } body.btf-vpmc-page .vpmc-controls .vpg-field { font-size: .69rem; } body.btf-vpmc-page .vpmc-list dd { font-size: .82rem; } body.btf-vpmc-page .vpmc-list dt { font-size: .75rem; } body.btf-vpmc-page .vpmc-verdict { padding: 1.19rem 1rem; } body.btf-vpmc-page .vpmc-hand .vpg-card { height: 76px; } body.btf-vpmc-page .vpmc-hand .vpg-card-pip { top: 24px; font-size: 1.5rem; } body.btf-vpmc-page .vpmc-hand .vpg-card-tag { font-size: .3125rem; } body.btf-vpmc-page .vpmc-example { padding: 1.375rem 1.06rem; } } /* ── print: the whole page, not the kit's chart-only print ──────────────── */ @media print { body.btf-vpmc-page .hero, body.btf-vpmc-page .btf-vpg-section:not( #chart ), body.btf-vpmc-page .btf-th-summary { display: block !important; } body.btf-vpmc-page .btf-vpg-section { padding: 1.4rem 0 !important; border-bottom: 1px solid #ccc !important; } body.btf-vpmc-page .hero, body.btf-vpmc-page .vpmc-verdict, body.btf-vpmc-page .btf-th-summary { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body.btf-vpmc-page .vpg-hero-cta, body.btf-vpmc-page .vpmc-credits, body.btf-vpmc-page .vpmc-presets, body.btf-vpmc-page .vpmc-more, body.btf-vpmc-page .vpmc-royal-switch { display: none !important; } /* the answers print open; the pay-table drawers stay shut */ body.btf-vpmc-page .vpg-faq details::details-content { content-visibility: visible; display: block; height: auto; } body.btf-vpmc-page .vpg-faq summary::after { display: none; } body.btf-vpmc-page .vpmc-panel, body.btf-vpmc-page .vpmc-example, body.btf-vpmc-page .vpmc-checker, body.btf-vpmc-page .vpmc-bonus-layout, body.btf-vpmc-page .vpmc-case, body.btf-vpmc-page .vpmc-odds, body.btf-vpmc-page .vpg-faq details, body.btf-vpmc-page .vpmc-verdict, body.btf-vpmc-page .btf-th-summary-card { break-inside: avoid; } }