/* ── Joker Poker strategy — /video-poker/strategy/joker-poker/ ─────────────── 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, cards, the variants strip, the analyzer, stories, the chart, callouts, the money grid and the FAQ come from there. This mock lays several of them out its own way, so what's here restyles them for this page only: the hero's decision, the rule cards, the pay-table buttons and return panel, the analyzer's bands and light results, open stories and the penalty callout, the chart's tabs and light drawer and the stake card, with their phone layouts. The green-hold cards (.vpg-green-holds) and the closing pointer (.vpg-next) are kit parts. Markup: blocks/btf-vpjp-*; script: the kit's video-poker-guide.js. ──────────────────────────────────────────────────────────────────────── */ /* ── hero: a flush worth breaking ───────────────────────────────────────── */ @media ( min-width: 960px ) { body.btf-vpjp-page .vpjp-try { justify-self: end; } } body.btf-vpjp-page .vpjp-try { width: 100%; max-width: 470px; padding: 1.625rem 1.75rem 1.5rem; } body.btf-vpjp-page .vpjp-try .vpg-quads-label { margin: 0; font-size: .5625rem; letter-spacing: .09em; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { margin: .8rem 0 1.5rem; font-size: 2.25rem; line-height: 1.08; } body.btf-vpjp-page .vpjp-try .vpg-quads-title em { color: #CFB778; } body.btf-vpjp-page .vpjp-try-cards[hidden], body.btf-vpjp-page .vpjp-try-figure[hidden], body.btf-vpjp-page .vpjp-try-switch[hidden] { display: none; } body.btf-vpjp-page .vpjp-try-cards .vpjp-hand { margin-bottom: 1.2rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { max-width: 72px; height: 96px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card:not( .is-held ) { opacity: .56; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-corner { font-size: 1.5rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-pip { top: 29px; font-size: 2rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card.is-joker .vpg-card-corner { font-size: .5625rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card.is-joker .vpg-card-pip { font-size: 1.81rem; } body.btf-vpjp-page .vpjp-try-switch { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.18fr ); gap: 6px; margin-bottom: 1.44rem; } body.btf-vpjp-page .vpjp-try-switch button { min-width: 0; min-height: 44px; padding: 9px 10px; background: transparent; border: 1px solid rgba( 255, 255, 255, .19 ); border-radius: 6px; color: #DCE5D5; font: 400 .69rem/1.55 var( --sans ); cursor: pointer; } body.btf-vpjp-page .vpjp-try-switch button[aria-pressed="true"] { background: var( --cream ); border-color: var( --cream ); color: var( --forest ); font-weight: 500; } body.btf-vpjp-page .vpjp-try-switch button:hover:not( [aria-pressed="true"] ) { border-color: #D0BD8D; } body.btf-vpjp-page .vpjp-try-figure { display: flex; align-items: center; gap: 19px; padding-top: 1.3rem; border-top: 1px solid rgba( 255, 255, 255, .14 ); } body.btf-vpjp-page .vpjp-try-figure strong { font: 400 3.06rem/1.05 var( --serif ); letter-spacing: -.025em; font-variant-numeric: tabular-nums; color: #D5BC82; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-unit { margin: 0; font: 400 .69rem/1.8 var( --sans ); color: #D0DCC8; } body.btf-vpjp-page .vpjp-try-unit span { display: block; font-size: .625rem; color: #B8C8B1; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-copy { min-height: 65px; margin: 1.06rem 0 .5rem; font: 400 .75rem/1.8 var( --sans ); color: #D8E1D0; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-copy[hidden] { display: none; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-link { padding: 0; color: #E1E6DA; font: 400 .75rem/1.5 var( --sans ); text-decoration: underline; text-decoration-color: #C9D0BC; text-underline-offset: 5px; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-link:hover { color: #FFF; } /* ── one name, more than one game ───────────────────────────────────────── */ body.btf-vpjp-page .vpg-variants.vpjp-versions { margin: 0 0 1.8rem; border-radius: 9px; } body.btf-vpjp-page .vpjp-versions > div { min-width: 0; padding: 1.5rem 1.44rem; } body.btf-vpjp-page .vpjp-versions > div.is-this { background: #E7ECDF; } body.btf-vpjp-page .vpjp-versions .vpg-label { margin-bottom: .56rem; font-size: .5625rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-versions h3.vpg-variant-name { margin: 0 0 .625rem; font: 400 1.625rem/1.15 var( --serif ); color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-versions .vpg-variant-copy { font-size: .69rem; line-height: 1.7; color: var( --muted ); } body.btf-vpjp-page .btf-vpg-section .vpjp-rules-intro { max-width: 95ch; margin: 0 0 1.94rem; font-size: .94rem; line-height: 1.85; color: var( --th-ink ); } body.btf-vpjp-page .vpjp-rules-intro strong { font-weight: 600; } body.btf-vpjp-page .vpjp-rules { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); margin-bottom: 1.75rem; border-top: 1px solid var( --line ); border-bottom: 1px solid var( --line ); } body.btf-vpjp-page .vpjp-rule { min-width: 0; padding: 1.69rem 1.5rem 1.625rem 0; } body.btf-vpjp-page .vpjp-rule + .vpjp-rule { padding-left: 1.5rem; border-left: 1px solid var( --line ); } body.btf-vpjp-page .vpjp-rule:last-child { padding-right: 0; } body.btf-vpjp-page .vpjp-hand.is-mini { gap: 5px; min-height: 78px; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card { flex: 0 1 47px; width: 47px; height: 78px; border-radius: 5px; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card-corner { top: 5px; left: 6px; font-size: 1.19rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card-pip { top: 25px; font-size: 1.56rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card-tag { padding: 3px 0; font-size: .375rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card.is-joker .vpg-card-corner { top: 7px; left: 4px; font-size: .44rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card.is-joker .vpg-card-pip { top: 23px; font-size: 1.5rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-rule-title { margin: 1.375rem 0 .75rem; font: 400 1.56rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-rule-copy { margin: 0; font-size: .82rem; line-height: 1.85; color: #4C5147; } body.btf-vpjp-page .vpjp-rule-copy strong { color: var( --forest ); font-weight: 600; } /* ── the pay tables ─────────────────────────────────────────────────────── */ body.btf-vpjp-page .vpjp-choices { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 9px; margin-bottom: 1.44rem; } body.btf-vpjp-page .vpjp-choice { display: block; min-width: 0; min-height: 118px; padding: 1.125rem 1.19rem; background: var( --paper ); border: 1px solid #C9CBBD; border-radius: 8px; color: var( --forest ); text-align: left; cursor: pointer; } body.btf-vpjp-page .vpjp-choice:disabled { cursor: default; } body.btf-vpjp-page .vpjp-choice:hover:not( :disabled ):not( [aria-pressed="true"] ) { border-color: var( --gold ); } body.btf-vpjp-page .vpjp-choice-name { display: block; margin-bottom: .625rem; font: 400 .69rem/1.5 var( --mono ); letter-spacing: .03em; } body.btf-vpjp-page .vpjp-choice b { display: block; margin-bottom: .56rem; font: 400 1.875rem/1.05 var( --serif ); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } body.btf-vpjp-page .vpjp-choice small { display: block; font: 400 .625rem/1.7 var( --sans ); color: var( --muted ); } body.btf-vpjp-page .vpjp-choice[aria-pressed="true"] { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-vpjp-page .vpjp-choice[aria-pressed="true"] .vpjp-choice-name { color: #D4C18E; } body.btf-vpjp-page .vpjp-choice[aria-pressed="true"] small { color: #C2D0B9; } body.btf-vpjp-page .vpjp-pay-layout { display: grid; grid-template-columns: minmax( 0, 1.6fr ) minmax( 0, 1fr ); gap: 1.56rem; align-items: start; margin-bottom: 1.3rem; } body.btf-vpjp-page .vpjp-pay-box { min-width: 0; overflow: hidden; background: var( --paper ); border: 1px solid var( --line ); border-radius: 9px; } body.btf-vpjp-page .btf-vpg-section .vpjp-pay-cap { margin: 0; padding: 1.06rem 1.3rem; font-size: .69rem; line-height: 1.8; color: var( --muted ); } body.btf-vpjp-page .prose .vpjp-pay-box table.vpg-table { border: 0; border-radius: 0; } body.btf-vpjp-page .prose .vpg-paytable tr.is-key th, body.btf-vpjp-page .prose .vpg-paytable tr.is-key td { background: #E8EDDF; color: var( --forest ); font-weight: 600; } body.btf-vpjp-page .vpjp-return { min-width: 0; padding: 1.56rem 1.5rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 9px; } body.btf-vpjp-page .vpjp-return .vpg-label { margin: 0; font-size: .5625rem; letter-spacing: .05em; } body.btf-vpjp-page .vpjp-return-figure { display: block; margin: .7rem 0 .375rem; font: 400 2.875rem/1.1 var( --serif ); letter-spacing: -.035em; font-variant-numeric: tabular-nums; color: var( --forest ); overflow-wrap: anywhere; } body.btf-vpjp-page .btf-vpg-section .vpjp-return-name { margin: 0 0 1.3rem; font-size: .75rem; line-height: 1.8; color: var( --forest ); } body.btf-vpjp-page .vpjp-net { margin-bottom: 1.25rem; padding: 1.19rem 0 1.125rem; border-top: 1px solid #D5D3C5; border-bottom: 1px solid #D5D3C5; } body.btf-vpjp-page .vpjp-net-label { display: block; max-width: 27ch; font: 400 .69rem/1.7 var( --sans ); color: var( --muted ); } body.btf-vpjp-page .vpjp-net b { display: block; margin-top: .56rem; font: 400 2.25rem/1.1 var( --serif ); font-variant-numeric: tabular-nums; white-space: nowrap; color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-return-copy { margin: 0 0 1rem; font-size: .82rem; line-height: 1.8; color: var( --muted ); } body.btf-vpjp-page .btf-vpg-section .vpjp-return .vpg-fine { margin: 0 0 .5rem; font-size: .69rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-pay-fine { margin: 0; } /* ── the analyzer, in bands ─────────────────────────────────────────────── */ body.btf-vpjp-page .vpg-analyzer.vpjp-tool { padding: 0; overflow: hidden; border-color: #D3D2C3; } body.btf-vpjp-page .vpjp-tool-top { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.25fr ); gap: 1.56rem; align-items: end; padding: 1.5rem 1.75rem; background: #EEEEE4; border-bottom: 1px solid var( --line ); } body.btf-vpjp-page .vpjp-tool-top .vpg-field { min-width: 0; font-size: .75rem; color: var( --forest ); } body.btf-vpjp-page .vpjp-tool-top .vpg-field select { height: 45px; border-color: #B8BEAE; border-radius: 6px; background-color: var( --paper ); } body.btf-vpjp-page .vpjp-tool-about { min-width: 0; padding-bottom: 4px; } body.btf-vpjp-page .vpjp-tool-about .vpg-label { margin: 0; font-size: .5625rem; letter-spacing: .06em; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool-basis { margin: .44rem 0 0; font-size: .75rem; line-height: 1.7; color: var( --muted ); } body.btf-vpjp-page .vpjp-deal { padding: 1.75rem; } body.btf-vpjp-page .vpjp-deal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 1.2rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-deal-title { margin: 0; font: 600 1rem/1.4 var( --sans ); color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-deal-help { margin: 0; font-size: .75rem; line-height: 1.6; color: var( --muted ); } body.btf-vpjp-page .vpjp-deal-help strong { font-weight: 600; } body.btf-vpjp-page .vpjp-tool .vpg-editor { max-width: 620px; gap: 13px; margin: 0 auto 1rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card, body.btf-vpjp-page .vpjp-tool .vpg-card-btn { opacity: 1; aspect-ratio: .76; background: #F8F5ED; border: 1px solid #BCBCAF; border-bottom-width: 3px; border-radius: 7px; box-shadow: 0 2px 4px rgba( 38, 62, 49, .06 ); color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-card-btn:hover { transform: none; border-color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-held, body.btf-vpjp-page .vpjp-tool .vpg-card-btn.is-held { background: #FFFDF7; border-color: var( --forest ); box-shadow: 0 0 0 2px rgba( 62, 96, 73, .13 ); } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-red { color: #9B3B32; } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-joker { background: #E4EADB; color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-joker.is-held { background: #E9EFDF; border-color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-editor :not( .is-held ) > .vpg-card-pip { opacity: .52; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-corner { top: 8px; left: 11px; font: 400 1.44rem/1.1 var( --serif ); letter-spacing: 0; text-align: center; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-corner small { display: block; margin-top: 1px; font-size: .94rem; line-height: 1.05; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-pip { margin-top: -8px; font: 400 2.75rem/1 var( --serif ); } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-tag { min-height: 0; padding: 7px 1px 6px; background: #EEEDE3; border-top: 1px solid #C8C9BB; color: var( --muted ); font-size: .5rem; letter-spacing: .08em; } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-held > .vpg-card-tag { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-joker .vpg-card-corner { top: 9px; left: 9px; font: 400 .56rem/1.4 var( --mono ); letter-spacing: .08em; text-align: left; } body.btf-vpjp-page .vpjp-tool .vpg-change { margin-top: 2px; color: var( --forest ); font-size: .75rem; } body.btf-vpjp-page .vpjp-tool .vpg-actions { gap: 9px; margin-bottom: 1.56rem; } body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-btn, body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-text-btn { min-height: 44px; padding: 10px 15px; background: var( --paper ); border: 1px solid #BAC2AF; border-radius: 6px; color: var( --forest ); font: 400 .75rem/1.5 var( --sans ); text-decoration: none; } body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-btn { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-text-btn:hover { border-color: var( --forest ); color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-presets { gap: 7px; padding-top: 1.25rem; } body.btf-vpjp-page .vpjp-tool .vpg-presets-label { margin-right: 6px; font: 400 .5625rem/1.7 var( --mono ); letter-spacing: .04em; color: var( --muted ); } body.btf-vpjp-page .vpjp-tool .vpg-presets button { padding: 7px 10px; background: var( --paper ); border-color: #CBCBBB; border-radius: 5px; font-size: .69rem; } body.btf-vpjp-page .vpjp-tool .vpg-presets button:hover { background: #EEF1E7; border-color: #819373; } body.btf-vpjp-page .vpjp-tool .vpg-presets button[aria-pressed="true"] { background: #E3E9D9; border-color: #819373; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool .vpg-preset-note { margin: .75rem 0 0; font-size: .69rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool > .vpg-error { margin: 0 1.75rem 1.25rem; } body.btf-vpjp-page .vpjp-tool .vpg-results { border: 0; border-top: 1px solid var( --line ); border-radius: 0; } body.btf-vpjp-page .vpjp-tool .vpg-best, body.btf-vpjp-page .vpjp-tool .vpg-yours { padding: 1.625rem 1.75rem; color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-best { background: #EDF0E4; } body.btf-vpjp-page .vpjp-tool .vpg-yours { background: #F5F5EC; border-left: 1px solid #CFD6C5; } body.btf-vpjp-page .vpjp-tool .vpg-best .vpg-label { color: var( --gold ); } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-tool h3.vpg-result-hold { margin: .56rem 0 .94rem; font: 500 1.06rem/1.6 var( --sans ); color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-results strong { margin-bottom: .5rem; font-size: 3.06rem; line-height: 1; letter-spacing: -.035em; color: var( --forest ); } body.btf-vpjp-page .vpjp-tool .vpg-best .vpg-unit, body.btf-vpjp-page .vpjp-tool .vpg-yours .vpg-unit { color: var( --muted ); } body.btf-vpjp-page .btf-vpg-section .vpjp-tool .vpg-best .vpg-result-detail, body.btf-vpjp-page .btf-vpg-section .vpjp-tool .vpg-yours .vpg-result-detail { margin-top: .75rem; line-height: 1.8; color: var( --muted ); } body.btf-vpjp-page .vpjp-tool .vpg-why { padding: 1.56rem 1.75rem; border-bottom: 1px solid var( --line ); } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-tool h3.vpg-why-title { margin: 0 0 .7rem; font: 400 1.69rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-tool .vpg-why-copy { font-size: .875rem; line-height: 1.8; color: #485141; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) { padding: 0 1.75rem; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) > summary { position: relative; justify-content: space-between; padding: 1.06rem 2.2rem 1.06rem 0; font-size: .875rem; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) > summary::before { content: none; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) > summary::after { content: '+'; position: absolute; top: 50%; right: 0; font: 400 1.5rem/1 var( --serif ); color: var( --gold ); transform: translateY( -50% ); } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method )[open] > summary::after { content: '\2212'; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool .vpg-method-copy { font-size: .82rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool-foot { margin: 0; padding: 1.19rem 1.75rem; background: #EEEEE4; font-size: .69rem; line-height: 1.8; color: var( --muted ); } /* ── the cards that look safe ───────────────────────────────────────────── */ body.btf-vpjp-page .vpjp-stories { margin-top: 0; border-bottom: 1px solid var( --line ); } body.btf-vpjp-page .vpjp-stories .vpg-story { grid-template-columns: minmax( 0, .82fr ) minmax( 0, 1.5fr ); gap: 2.56rem; padding: 1.875rem 0; } body.btf-vpjp-page .vpjp-stories .vpg-story-cards { padding: 0; background: none; border: 0; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { flex: 1 1 0; max-width: 64px; height: 92px; } body.btf-vpjp-page .vpjp-stories .vpg-label { margin-bottom: .625rem; font-size: .5625rem; line-height: 1.8; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-stories h3.vpg-story-title { margin: 0 0 .8rem; font-size: 1.75rem; line-height: 1.2; } body.btf-vpjp-page .btf-vpg-section .vpjp-stories .vpg-story-copy { margin: 0 0 .5rem; color: #4E5348; } body.btf-vpjp-page .vpjp-stories .vpg-text-btn { font-weight: 400; font-size: .75rem; text-decoration-color: #B2BB9E; text-underline-offset: 5px; } body.btf-vpjp-page .vpg-callout.vpjp-penalty { display: grid; grid-template-columns: minmax( 0, 1.7fr ) minmax( 0, 1fr ); gap: 2.2rem; align-items: center; margin-top: 1.875rem; padding: 1.8rem 1.8rem 1.625rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-penalty-title { margin: 0 0 .875rem; font: 400 1.69rem/1.2 var( --serif ); color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-penalty-copy { margin: 0 0 .875rem; font-size: .82rem; line-height: 1.85; color: #4D5247; } body.btf-vpjp-page .btf-vpg-section .vpjp-penalty-copy:last-child { margin-bottom: 0; } body.btf-vpjp-page .vpjp-penalty-copy strong { color: var( --forest ); font-weight: 600; } body.btf-vpjp-page .vpjp-penalty-actions { display: flex; flex-direction: column; gap: 10px; } body.btf-vpjp-page .vpjp-penalty-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 11px 15px; background: var( --paper ); border: 1px solid var( --line ); border-radius: 8px; color: var( --forest ); font: 600 .75rem/1.5 var( --sans ); text-align: left; cursor: pointer; } body.btf-vpjp-page .vpjp-penalty-btn:hover { border-color: var( --forest ); } body.btf-vpjp-page .vpjp-penalty-btn[hidden] { display: none; } /* ── the chart: tabs on the joker part, a light drawer ──────────────────── */ body.btf-vpjp-page .vpg-callout.vpjp-chart-scope { margin-bottom: 1.5rem; border-left-color: #768868; background: #E7EBDE; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-chart-scope h3.vpg-callout-title { margin-bottom: .2rem; font-size: .82rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-chart-scope .vpg-callout-copy { font-size: .82rem; color: #454E3C; } body.btf-vpjp-page .vpjp-chart-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 25px; margin-bottom: 1.3rem; } body.btf-vpjp-page .vpg-chart-tabs.vpjp-chart-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; } body.btf-vpjp-page .vpg-chart-tabs.vpjp-chart-tabs[hidden] { display: none; } body.btf-vpjp-page .vpjp-chart-tabs button, body.btf-vpjp-page .vpjp-print { min-height: 44px; padding: 10px 15px; background: var( --paper ); border: 1px solid #BBC1AD; border-radius: 6px; color: var( --forest ); font: 400 .75rem/1.6 var( --sans ); cursor: pointer; } body.btf-vpjp-page .vpjp-chart-tabs button:hover:not( [aria-pressed="true"] ), body.btf-vpjp-page .vpjp-print:hover { background: var( --paper ); border-color: var( --gold ); } body.btf-vpjp-page .vpjp-chart-tabs button[aria-pressed="true"] { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-vpjp-page .vpg-chart-toolbar.vpjp-chart-print { display: block; margin: 0; } body.btf-vpjp-page .vpg-chart-toolbar.vpjp-chart-find { display: grid; grid-template-columns: minmax( 0, 500px ) minmax( 0, 1fr ); align-items: end; gap: 12px 25px; margin: 0 0 1.375rem; } body.btf-vpjp-page .vpg-chart-toolbar.vpjp-chart-print[hidden], body.btf-vpjp-page .vpg-chart-toolbar.vpjp-chart-find[hidden] { display: none; } body.btf-vpjp-page .vpjp-chart-find .vpg-field { max-width: none; } body.btf-vpjp-page .vpjp-chart-find input { font-size: .875rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-chart-find .vpg-chart-status { margin: 0; padding-bottom: .7rem; font-size: .69rem; line-height: 1.7; text-align: right; } body.btf-vpjp-page .vpjp-chart .vpg-chart-details { margin-bottom: 1.125rem; border-color: #D0D2C1; } body.btf-vpjp-page .vpjp-chart .vpg-chart-details > summary { position: relative; padding: 1.3rem 3.4rem 1.3rem 1.44rem; background: var( --paper ); color: var( --forest ); font: 500 .875rem/1.6 var( --sans ); } body.btf-vpjp-page .vpjp-chart .vpg-chart-details > summary::after { content: '+'; position: absolute; top: 50%; right: 1.44rem; font: 400 1.69rem/1 var( --serif ); color: var( --gold ); transform: translateY( -50% ); } body.btf-vpjp-page .vpjp-chart .vpg-chart-details[open] > summary { border-bottom: 1px solid var( --line ); } body.btf-vpjp-page .vpjp-chart .vpg-chart-details[open] > summary::after { content: '\2212'; } body.btf-vpjp-page .btf-vpg-section .vpjp-chart-foot { margin: 0; font-size: .69rem; } /* ── the edge is small ──────────────────────────────────────────────────── */ body.btf-vpjp-page .vpg-money.vpjp-credit-grid { grid-template-columns: minmax( 0, 1.5fr ) minmax( 0, 1fr ); gap: 2.44rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-credit-grid h3.vpg-col-title { margin-bottom: 1.06rem; font-size: 1.75rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-credit-main .vpg-col-copy { color: var( --muted ); } body.btf-vpjp-page .vpjp-credits-wrap { margin: 1.44rem 0 1.06rem; overflow: hidden; border: 1px solid var( --line ); border-radius: 8px; } body.btf-vpjp-page .prose .vpjp-credits-wrap table.vpg-table { border: 0; border-radius: 0; } body.btf-vpjp-page .prose .vpjp-credits-table tr.is-key th, body.btf-vpjp-page .prose .vpjp-credits-table tr.is-key td { background: #E8EDDF; color: var( --forest ); font-weight: 600; } body.btf-vpjp-page .vpjp-stake { min-width: 0; padding: 1.625rem 1.69rem; background: #E9EDDF; border: 1px solid #CED5C3; border-radius: 9px; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-stake h3.vpg-col-title { margin: 0 0 1.375rem; font-size: 1.81rem; } body.btf-vpjp-page .vpjp-stake-list { margin: 0 0 1.3rem; padding: .5rem 0; border-top: 1px solid #CCD3BF; border-bottom: 1px solid #CCD3BF; } body.btf-vpjp-page .vpjp-stake-list > div { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: .69rem 0; } body.btf-vpjp-page .vpjp-stake-list dt { font: 400 .75rem/1.5 var( --sans ); color: #4F5C44; } body.btf-vpjp-page .vpjp-stake-list dd { margin: 0; font: 400 1.81rem/1.1 var( --serif ); font-variant-numeric: tabular-nums; color: var( --forest ); } body.btf-vpjp-page .btf-vpg-section .vpjp-stake-copy { margin: 0 0 1.06rem; font-size: .75rem; line-height: 1.85; color: #515D48; } /* ── narrower ───────────────────────────────────────────────────────────── */ @media ( max-width: 1000px ) { body.btf-vpjp-page .vpjp-try { padding: 1.44rem 1.3rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { font-size: 2.06rem; } body.btf-vpjp-page .vpjp-try-switch button { padding: 9px 7px; font-size: .625rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand { gap: 5px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { height: 87px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-corner { font-size: 1.31rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-pip { font-size: 1.69rem; } body.btf-vpjp-page .vpjp-try-figure { gap: 13px; } body.btf-vpjp-page .vpjp-try-figure strong { font-size: 2.625rem; } body.btf-vpjp-page .vpjp-rule { padding-right: 1.25rem; } body.btf-vpjp-page .vpjp-rule + .vpjp-rule { padding-left: 1.25rem; } body.btf-vpjp-page .vpjp-choice { padding: 1rem; } body.btf-vpjp-page .vpjp-pay-layout { grid-template-columns: minmax( 0, 1.45fr ) minmax( 0, 1fr ); gap: 1.25rem; } body.btf-vpjp-page .vpjp-return { padding: 1.375rem 1.25rem; } body.btf-vpjp-page .vpjp-return-figure { font-size: 2.5rem; } body.btf-vpjp-page .vpjp-stories .vpg-story { grid-template-columns: minmax( 0, .9fr ) minmax( 0, 1.5fr ); gap: 1.75rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand { gap: 5px; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { height: 86px; } body.btf-vpjp-page .vpg-money.vpjp-credit-grid { gap: 1.56rem; } body.btf-vpjp-page .vpjp-stake { padding: 1.5rem 1.375rem; } } @media ( max-width: 959px ) { body.btf-vpjp-page .vpjp-try { max-width: 520px; padding: 1.69rem 1.8rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { font-size: 2.25rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand { max-width: 410px; gap: 8px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { height: 101px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-corner { font-size: 1.5rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-pip { top: 31px; font-size: 2.06rem; } body.btf-vpjp-page .vpjp-try-switch { max-width: 410px; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr ); } body.btf-vpjp-page .vpjp-try-switch button { font-size: .75rem; } body.btf-vpjp-page .vpjp-try-figure strong { font-size: 3.06rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-unit { font-size: .75rem; } body.btf-vpjp-page .vpjp-try-unit span { font-size: .69rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-copy { min-height: 0; font-size: .82rem; } } @media ( max-width: 800px ) { body.btf-vpjp-page .vpjp-versions > div { padding: 1.3rem 1.125rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-versions h3.vpg-variant-name { font-size: 1.5rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-versions .vpg-variant-copy { font-size: .625rem; } body.btf-vpjp-page .vpjp-rules { grid-template-columns: 1fr; } body.btf-vpjp-page .vpjp-rule, body.btf-vpjp-page .vpjp-rule + .vpjp-rule { padding: 1.56rem 0; border-left: 0; } body.btf-vpjp-page .vpjp-rule + .vpjp-rule { border-top: 1px solid var( --line ); } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-rule-title { font-size: 1.75rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-rule-copy { max-width: 68ch; font-size: .875rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card { flex-basis: 50px; width: 50px; height: 80px; } body.btf-vpjp-page .vpjp-pay-layout { grid-template-columns: minmax( 0, 1.4fr ) minmax( 0, 1fr ); } body.btf-vpjp-page .vpjp-return-figure { font-size: 2.19rem; } body.btf-vpjp-page .vpjp-choice b { font-size: 1.69rem; } body.btf-vpjp-page .vpjp-stories .vpg-story { grid-template-columns: 1fr; gap: 1.375rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand { max-width: 330px; gap: 7px; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { height: 91px; } body.btf-vpjp-page .vpg-callout.vpjp-penalty { grid-template-columns: 1fr; gap: 1.44rem; } body.btf-vpjp-page .vpjp-penalty-actions { flex-direction: row; } body.btf-vpjp-page .vpjp-penalty-btn { flex: 1; } body.btf-vpjp-page .vpg-money.vpjp-credit-grid { grid-template-columns: 1fr; gap: 1.75rem; } body.btf-vpjp-page .vpjp-stake-list { max-width: 450px; } } @media ( max-width: 760px ) { body.btf-vpjp-page .vpjp-tool-top { grid-template-columns: 1fr; gap: 1rem; padding: 1.375rem; } body.btf-vpjp-page .vpjp-tool-about { padding: 0; } body.btf-vpjp-page .vpjp-deal { padding: 1.44rem 1.375rem; } body.btf-vpjp-page .vpjp-deal-head { display: block; } body.btf-vpjp-page .btf-vpg-section .vpjp-deal-help { margin-top: .375rem; } body.btf-vpjp-page .vpjp-tool .vpg-best, body.btf-vpjp-page .vpjp-tool .vpg-yours { padding: 1.5rem 1.375rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-tool h3.vpg-result-hold { font-size: .94rem; } body.btf-vpjp-page .vpjp-tool .vpg-results strong { font-size: 2.69rem; } body.btf-vpjp-page .vpjp-tool .vpg-why { padding: 1.44rem 1.375rem; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) { padding: 0 1.375rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool > .vpg-error { margin: 0 1.375rem 1.25rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool-foot { padding: 1.125rem 1.375rem; } body.btf-vpjp-page .vpg-chart-toolbar.vpjp-chart-find { grid-template-columns: 1fr; gap: .5rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-chart-find .vpg-chart-status { padding: 0; text-align: left; } } @media ( max-width: 600px ) { body.btf-vpjp-page .vpjp-try { padding: 1.5rem 1.375rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { font-size: 2.06rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand { gap: 6px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { height: 93px; } body.btf-vpjp-page .vpjp-try-switch { gap: 5px; } body.btf-vpjp-page .vpjp-try-switch button { font-size: .625rem; } body.btf-vpjp-page .vpjp-try-figure { gap: 16px; } body.btf-vpjp-page .vpjp-try-figure strong { font-size: 2.75rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-unit { font-size: .625rem; } body.btf-vpjp-page .vpjp-try-unit span { font-size: .5625rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-copy { font-size: .75rem; } body.btf-vpjp-page .vpg-variants.vpjp-versions { grid-template-columns: 1fr; } body.btf-vpjp-page .vpjp-versions > div { padding: 1.25rem 1.3rem; } body.btf-vpjp-page .vpjp-versions > div + div { border-left: 0; border-top: 1px solid var( --line ); } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-versions h3.vpg-variant-name { margin-bottom: .5rem; font-size: 1.69rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-versions .vpg-variant-copy { font-size: .75rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-rules-intro { font-size: .875rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-rule-title { font-size: 1.625rem; } body.btf-vpjp-page .vpjp-choices { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); margin-bottom: 1.3rem; } body.btf-vpjp-page .vpjp-choice { min-height: 116px; padding: 1.06rem 1.125rem; } body.btf-vpjp-page .vpjp-choice b { font-size: 1.94rem; } body.btf-vpjp-page .vpjp-pay-layout { grid-template-columns: 1fr; gap: 1.3rem; } body.btf-vpjp-page .vpjp-return { padding: 1.5rem; } body.btf-vpjp-page .vpjp-return-figure { font-size: 2.94rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-return-copy { font-size: .82rem; } body.btf-vpjp-page .vpjp-net { display: flex; align-items: center; justify-content: space-between; gap: 20px; } body.btf-vpjp-page .vpjp-net-label { max-width: 25ch; } body.btf-vpjp-page .vpjp-net b { margin: 0; } body.btf-vpjp-page .vpjp-stories .vpg-story { gap: 1.3rem; padding: 1.69rem 0; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-stories h3.vpg-story-title { font-size: 1.625rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand { gap: 6px; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { height: 89px; } body.btf-vpjp-page .vpg-callout.vpjp-penalty { gap: 1.3rem; padding: 1.5rem 1.3rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-penalty-title { font-size: 1.625rem; } body.btf-vpjp-page .vpjp-penalty-actions { flex-direction: column; gap: 9px; } body.btf-vpjp-page .btf-vpg-section .vpjp-chart-scope .vpg-callout-copy { font-size: .75rem; } body.btf-vpjp-page .vpjp-chart-bar { display: grid; gap: 12px; } body.btf-vpjp-page .vpjp-chart-tabs button { flex: 1 1 auto; padding: 9px 12px; font-size: .69rem; } body.btf-vpjp-page .vpjp-print { font-size: .69rem; } body.btf-vpjp-page .vpjp-chart-find input { font-size: 1rem; } body.btf-vpjp-page .vpjp-chart .vpg-chart-details > summary { padding: 1.19rem 2.9rem 1.19rem 1.25rem; font-size: .82rem; } body.btf-vpjp-page .vpjp-chart .vpg-chart-details > summary::after { right: 1.19rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-credit-grid h3.vpg-col-title { font-size: 1.69rem; } body.btf-vpjp-page .vpjp-stake { padding: 1.5rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-stake h3.vpg-col-title { font-size: 1.81rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-stake-copy { font-size: .82rem; } } @media ( max-width: 480px ) { body.btf-vpjp-page .vpjp-tool-top { padding: 1.25rem 1.06rem; } body.btf-vpjp-page .vpjp-deal { padding: 1.375rem 1.06rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-deal-help { font-size: .69rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor { gap: 7px; margin-bottom: .75rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-corner { top: 6px; left: 6px; font-size: 1.06rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-corner small { font-size: .75rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-pip { margin-top: -6px; font-size: 1.875rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor .vpg-card-tag { padding: 6px 0 5px; font-size: .375rem; letter-spacing: .02em; } body.btf-vpjp-page .vpjp-tool .vpg-editor .is-joker .vpg-card-corner { top: 6px; left: 5px; font-size: .4rem; letter-spacing: .03em; } body.btf-vpjp-page .vpjp-tool .vpg-change { font-size: .69rem; } body.btf-vpjp-page .vpjp-tool .vpg-actions { justify-content: flex-start; gap: 7px; margin-bottom: 1.375rem; } body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-btn, body.btf-vpjp-page .vpjp-tool .vpg-actions .vpg-text-btn { flex: 1 1 auto; padding: 9px 10px; font-size: .69rem; } body.btf-vpjp-page .vpjp-tool .vpg-best, body.btf-vpjp-page .vpjp-tool .vpg-yours { padding: 1.3rem 1.06rem; } body.btf-vpjp-page .vpjp-tool .vpg-yours { border-left: 0; border-top: 1px solid #CFD6C5; } /* the kit stacks the two results here */ body.btf-vpjp-page .vpjp-tool .vpg-results strong { font-size: 2.25rem; } body.btf-vpjp-page .vpjp-tool .vpg-why { padding: 1.3rem 1.06rem; } body.btf-vpjp-page .prose .btf-vpg-section .vpjp-tool h3.vpg-why-title { font-size: 1.44rem; } body.btf-vpjp-page .vpjp-tool :is( .vpg-outcomes, .vpg-holds, .vpg-method ) { padding: 0 1.06rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool > .vpg-error { margin: 0 1.06rem 1.25rem; } body.btf-vpjp-page .btf-vpg-section .vpjp-tool-foot { padding: 1.06rem; } body.btf-vpjp-page .vpjp-net b { font-size: 2rem; } } @media ( max-width: 400px ) { body.btf-vpjp-page .vpjp-try { padding: 1.375rem 1.19rem; } body.btf-vpjp-page .vpjp-try .vpg-quads-label { font-size: .5rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { font-size: 1.94rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand { gap: 5px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { height: 84px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-corner { top: 5px; left: 6px; font-size: 1.31rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-pip { top: 28px; font-size: 1.625rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card.is-joker .vpg-card-corner { left: 4px; font-size: .44rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card.is-joker .vpg-card-pip { top: 25px; font-size: 1.625rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-tag { font-size: .375rem; } body.btf-vpjp-page .vpjp-try-switch button { padding: 9px 6px; } body.btf-vpjp-page .vpjp-try-figure strong { font-size: 2.5rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-unit { font-size: .5625rem; } body.btf-vpjp-page .vpjp-try-unit span { font-size: .5rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpjp-try-copy { font-size: .69rem; } body.btf-vpjp-page .vpjp-choice { padding: 1rem; } body.btf-vpjp-page .vpjp-choice b { font-size: 1.81rem; } body.btf-vpjp-page .vpjp-choice small { font-size: .5625rem; } body.btf-vpjp-page .vpjp-chart-tabs button { padding: 9px 10px; font-size: .625rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { height: 84px; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card-corner { left: 6px; font-size: 1.25rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card-pip { top: 26px; font-size: 1.69rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card-tag { font-size: .375rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card.is-joker .vpg-card-corner { font-size: .44rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card.is-joker .vpg-card-pip { font-size: 1.625rem; } body.btf-vpjp-page .vpg-callout.vpjp-penalty { padding: 1.375rem 1.19rem; } body.btf-vpjp-page .prose .btf-vpg-section h3.vpjp-penalty-title { font-size: 1.56rem; } body.btf-vpjp-page .vpjp-return { padding: 1.375rem; } body.btf-vpjp-page .vpjp-return-figure { font-size: 2.69rem; } } @media ( max-width: 350px ) { body.btf-vpjp-page .vpjp-try { padding: 1.3rem 1.06rem; } body.btf-vpjp-page .btf-vpg-hero .vpjp-try .vpg-quads-title { font-size: 1.75rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card { height: 76px; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-corner { font-size: 1.125rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card-pip { top: 25px; font-size: 1.44rem; } body.btf-vpjp-page .vpjp-try .vpjp-hand .vpg-card.is-joker .vpg-card-corner { font-size: .375rem; } body.btf-vpjp-page .vpjp-try-switch { grid-template-columns: 1fr; } body.btf-vpjp-page .vpjp-try-figure strong { font-size: 2.25rem; } body.btf-vpjp-page .vpjp-choice { padding: .875rem; min-height: 108px; } body.btf-vpjp-page .vpjp-choice b { font-size: 1.56rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card { height: 76px; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card-corner { font-size: 1.06rem; } body.btf-vpjp-page .vpjp-stories .vpjp-hand .vpg-card-pip { top: 24px; font-size: 1.44rem; } body.btf-vpjp-page .vpjp-hand.is-mini .vpg-card { flex-basis: 44px; width: 44px; height: 74px; } /* five cards and their Edit buttons stay 44px wide */ body.btf-vpjp-page .vpjp-deal { padding-left: .8rem; padding-right: .8rem; } body.btf-vpjp-page .vpjp-tool .vpg-editor { gap: 6px; } } /* ── print: the kit prints the chart alone, on one page; this page's extra chart parts stay off it ── */ @media print { body.btf-vpjp-page .vpjp-chart-scope, body.btf-vpjp-page .vpjp-chart-bar, body.btf-vpjp-page .btf-vpg-section .vpjp-chart-foot { display: none !important; } }