/** * Video poker hub — /video-poker/ * * Loads after game-hub.css (path cards, icon cards, grids, coming-soon) and * blackjack-hub.css, whose hub components both game hubs share: the pending * link state, the felt section's grid and colours (.bjh-edge, .bjh-h3, * .bjh-p, .bjh-live-cap, .bjh-edge-note), the strategy layout and aside, the * roadmap note and the disclosure line. Only what is new to this hub is here: * the two solved panels on the felt and the hold solver. * * The solver borrows its parts from the blackjack strategy calculator * (blackjack-strategy.css): its felt table, rank chips, answer card, badge * and folded EV list, at the same sizes and radii. The cards are the hand * rankings page's card primitive (hand-rankings-page.css), at a larger size. */ /* ── the felt panels ────────────────────────────────────────────────────── */ /* On felt every element states its own colour; see blackjack-hub.css. */ .vph-edge .vph-pt, .vph-edge .vph-mix { display: flex; flex-direction: column; gap: .4rem; margin: 1.2rem 0 0; } .vph-edge .vph-pt-head, .vph-edge .vph-mix-head { font-family: 'JetBrains Mono', monospace; font-size: .56rem; letter-spacing: .09em; text-transform: uppercase; color: rgba( 247, 243, 232, .5 ); padding-bottom: .2rem; } .vph-edge .vph-pt-head span:nth-child( n+3 ), .vph-edge .vph-mix-head span:nth-child( n+2 ) { text-align: right; } /* pay tables: what each one keeps */ .vph-edge .vph-pt-head, .vph-edge .vph-pt-row { display: grid; grid-template-columns: 3rem minmax( 0, 1fr ) 3.4rem 4.2rem; gap: .7rem; align-items: center; } .vph-edge .vph-pt-k { font-family: 'JetBrains Mono', monospace; font-size: .82rem; font-weight: 600; color: var( --on-dark ); } .vph-edge .vph-pt-row.is-best .vph-pt-k { color: #C9A24A; } .vph-edge .vph-pt-track, .vph-edge .vph-mix-track { height: 13px; background: rgba( 247, 243, 232, .12 ); border-radius: 4px; overflow: hidden; } .vph-edge .vph-pt-track i, .vph-edge .vph-mix-track i { display: block; height: 100%; border-radius: 4px; } .vph-edge .vph-pt-track i { background: #C97A6A; } .vph-edge .vph-pt-keep { font-family: 'JetBrains Mono', monospace; font-size: .76rem; text-align: right; color: #E08A8A; } .vph-edge .vph-pt-ret { font-family: 'JetBrains Mono', monospace; font-size: .76rem; text-align: right; color: var( --on-dark ); } .vph-edge .vph-pt-row.is-best .vph-pt-ret { font-weight: 700; } /* where the return comes from */ .vph-edge .vph-mix-head, .vph-edge .vph-mix-row { display: grid; grid-template-columns: minmax( 0, 1fr ) 5.6rem 4.2rem 3.8rem; gap: .7rem; align-items: center; } .vph-edge .vph-mix-k { font-size: .86rem; line-height: 1.35; color: var( --on-dark ); min-width: 0; } .vph-edge .vph-mix-k i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .62rem; color: rgba( 247, 243, 232, .5 ); white-space: nowrap; } .vph-edge .vph-mix-odds { font-family: 'JetBrains Mono', monospace; font-size: .7rem; text-align: right; color: rgba( 247, 243, 232, .62 ); white-space: nowrap; } .vph-edge .vph-mix-track i { background: rgba( 247, 243, 232, .42 ); } .vph-edge .vph-mix-row.is-key .vph-mix-track i { background: #C9A24A; } .vph-edge .vph-mix-v { font-family: 'JetBrains Mono', monospace; font-size: .76rem; text-align: right; color: var( --on-dark ); } .vph-edge .vph-mix-row.is-key .vph-mix-v { font-weight: 700; } .vph-edge .bjh-more { display: inline-block; margin-top: .9rem; } /* ── the hold solver ────────────────────────────────────────────────────── */ #btf-vph-holds { --vph-felt: #1B3A2D; --vph-felt-2: #24493A; --vph-gold: #C9A24A; --vph-hold: #1B3A2D; --vph-pat: #92700A; --vph-draw: #5A5A5A; --vph-red: #A33B2A; --vph-black: #141914; margin-top: 1.6rem; } #btf-vph-holds button { font: inherit; } #btf-vph-holds button:focus-visible, #btf-vph-holds summary:focus-visible { outline: 2px solid var( --vph-gold ); outline-offset: 2px; } /* game tabs (as the strategy calculator's chart tabs) */ #btf-vph-holds .vph-tabs { display: flex; gap: .4rem; margin-bottom: .8rem; flex-wrap: wrap; } #btf-vph-holds .vph-tab { font-size: .85rem; padding: .5rem .9rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: 8px; cursor: pointer; color: var( --ink2 ); transition: border-color .12s; } #btf-vph-holds .vph-tab:hover { border-color: var( --felt ); } #btf-vph-holds .vph-tab.active { background: var( --felt ); border-color: var( --felt ); color: var( --on-dark ); font-weight: 600; } /* the table */ #btf-vph-holds .vph-table { background: radial-gradient( ellipse at 50% 0%, var( --vph-felt-2 ), var( --vph-felt ) 70% ); border-radius: 18px; padding: 1.5rem 1.5rem 1.3rem; display: flex; flex-direction: column; gap: 1.2rem; box-shadow: inset 0 0 0 1px rgba( 247, 243, 232, .08 ); } #btf-vph-holds .vph-hand { display: grid; grid-template-columns: repeat( 5, minmax( 0, 4.6rem ) ); justify-content: center; gap: .7rem; } #btf-vph-holds .vph-slot { display: flex; flex-direction: column; align-items: center; gap: .5rem; min-width: 0; } /* the card: the hand rankings page's primitive, larger */ #btf-vph-holds .vph-card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 100%; aspect-ratio: 5 / 7; background: #FAFAF5; border: 1px solid #222; border-radius: 7px; box-shadow: 0 3px 8px rgba( 0, 0, 0, .28 ), inset 0 0 0 1px #fff; font-family: 'Instrument Serif', Georgia, serif; line-height: 1; color: var( --vph-black ); transition: transform .15s, box-shadow .15s; } #btf-vph-holds .vph-card.is-red { color: var( --vph-red ); } #btf-vph-holds .vph-card b { font-weight: 500; font-size: 1.9rem; letter-spacing: -.03em; } #btf-vph-holds .vph-card i { font-style: normal; font-family: Georgia, serif; font-size: 1.25rem; } #btf-vph-holds .vph-slot.is-held .vph-card { transform: translateY( -5px ); box-shadow: 0 0 0 3px var( --vph-gold ), 0 8px 16px rgba( 0, 0, 0, .3 ); } #btf-vph-holds .vph-held { font-family: 'JetBrains Mono', monospace; font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var( --vph-gold ); visibility: hidden; } #btf-vph-holds .vph-slot.is-held .vph-held { visibility: visible; } /* hand chips (as the calculator's rank chips) */ #btf-vph-holds .vph-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding-top: 1.1rem; border-top: 1px solid rgba( 247, 243, 232, .14 ); } #btf-vph-holds .vph-chip { font-size: .84rem; font-weight: 500; padding: .5rem .8rem; min-height: 2.5rem; background: rgba( 247, 243, 232, .12 ); border: 1px solid rgba( 247, 243, 232, .18 ); border-radius: 7px; color: var( --on-dark ); cursor: pointer; transition: background .12s, transform .12s; } #btf-vph-holds .vph-chip:hover { background: rgba( 247, 243, 232, .22 ); transform: translateY( -1px ); } #btf-vph-holds .vph-chip.on { background: #fff; border-color: var( --vph-gold ); color: var( --ink ); font-weight: 700; box-shadow: 0 0 0 2px var( --vph-gold ); } #btf-vph-holds .vph-deal { border-style: dashed; } /* the answer (as the calculator's answer card) */ #btf-vph-holds .vph-answer { margin-top: 1rem; display: grid; grid-template-columns: 11rem minmax( 0, 1fr ); gap: 1.4rem; align-items: start; padding: 1.4rem 1.5rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: 18px; } #btf-vph-holds .vph-badge { display: flex; align-items: center; justify-content: center; min-height: 7rem; border-radius: 14px; color: #fff; font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 2.1rem; letter-spacing: -.02em; line-height: 1.05; text-align: center; padding: .5rem; background: var( --vph-hold ); } #btf-vph-holds .vph-badge.is-pat { background: var( --vph-pat ); } #btf-vph-holds .vph-badge.is-draw { background: var( --vph-draw ); } #btf-vph-holds .vph-answer-body { min-width: 0; } #btf-vph-holds .vph-eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var( --ink3 ); margin-bottom: .45rem; } #btf-vph-holds .vph-lead { margin: 0 0 .5rem; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.55rem; line-height: 1.2; letter-spacing: -.01em; color: var( --ink ); } #btf-vph-holds .vph-why { margin: 0; font-size: 1rem; line-height: 1.6; color: var( --ink2 ); } #btf-vph-holds .vph-why b { color: var( --ink ); } /* cards in running text */ .vph-c { white-space: nowrap; font-weight: 600; color: var( --ink ); } .vph-c.is-red { color: #A33B2A; } /* every hold, ranked (as the calculator's folded EV list) */ #btf-vph-holds .vph-rank-wrap { margin-top: 2rem; } #btf-vph-holds .vph-h3 { font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; margin: 0 0 .35rem; color: var( --ink ); } #btf-vph-holds .vph-sub { margin: 0 0 1rem; font-size: .92rem; line-height: 1.55; color: var( --ink2 ); } #btf-vph-holds .vph-evs { display: flex; flex-direction: column; } #btf-vph-holds .vph-ev { display: grid; grid-template-columns: 1.6rem minmax( 0, 1fr ) 7rem 4.6rem; gap: .8rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var( --rule ); } #btf-vph-holds .vph-evs > .vph-ev:last-child { border-bottom: 0; } #btf-vph-holds .vph-ev-n { font-family: 'JetBrains Mono', monospace; font-size: .68rem; color: var( --ink3 ); } #btf-vph-holds .vph-ev-k { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; font-size: .88rem; color: var( --ink2 ); } #btf-vph-holds .vph-mini { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 36px; border: 1px solid #222; border-radius: 3px; background: #FAFAF5; box-shadow: 0 1px 0 rgba( 0, 0, 0, .15 ), inset 0 0 0 1px #fff; font-family: 'Instrument Serif', Georgia, serif; font-size: .82rem; line-height: 1; color: var( --vph-black ); } #btf-vph-holds .vph-mini.is-red { color: var( --vph-red ); } #btf-vph-holds .vph-mini s { text-decoration: none; font-family: Georgia, serif; font-size: .6rem; margin-left: 1px; } #btf-vph-holds .vph-ev-bar { height: 14px; background: var( --bg3 ); border-radius: 4px; overflow: hidden; } #btf-vph-holds .vph-ev-bar i { display: block; height: 100%; background: var( --felt ); border-radius: 4px; } #btf-vph-holds .vph-ev-v { font-family: 'JetBrains Mono', monospace; font-size: .78rem; text-align: right; color: var( --ink2 ); } #btf-vph-holds .vph-ev.is-best .vph-ev-k, #btf-vph-holds .vph-ev.is-best .vph-ev-v { font-weight: 700; color: var( --ink ); } #btf-vph-holds .vph-ev.is-best .vph-ev-n { color: var( --ink ); font-weight: 700; } #btf-vph-holds .vph-more { margin-top: .4rem; border-top: 1px solid var( --rule ); } #btf-vph-holds .vph-more > summary { padding: .8rem 0 .2rem; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var( --felt ); list-style: none; } #btf-vph-holds .vph-more > summary::-webkit-details-marker { display: none; } #btf-vph-holds .vph-more > summary::after { content: ' \25BE'; } #btf-vph-holds .vph-more[open] > summary::after { content: ' \25B4'; } #btf-vph-holds .vph-note { margin: .9rem 0 0; font-size: .8rem; line-height: 1.5; color: var( --ink3 ); } /* without JavaScript */ #btf-vph-holds .vph-fallback { font-size: .95rem; line-height: 1.6; color: var( --ink2 ); } #btf-vph-holds .vph-fallback-lead { margin: 0; } #btf-vph-holds .vph-fallback-list { margin: .7rem 0 0; padding-left: 1.1rem; } #btf-vph-holds .vph-fallback-list li { margin-bottom: .45rem; } #btf-vph-holds .vph-table ::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); } /* Touch screens of any width get full-size targets (a landscape phone is wider than 600px). */ @media ( pointer: coarse ) { #btf-vph-holds .vph-chip, #btf-vph-holds .vph-tab { min-height: 44px; } } /* ── narrow ─────────────────────────────────────────────────────────────── */ @media ( max-width: 600px ) { .vph-edge .vph-pt-head, .vph-edge .vph-pt-row { grid-template-columns: minmax( 0, 1fr ) 3.4rem 4.2rem; } .vph-edge .vph-pt-head span:nth-child( 2 ), .vph-edge .vph-pt-track { display: none; } .vph-edge .vph-mix-head, .vph-edge .vph-mix-row { grid-template-columns: minmax( 0, 1fr ) 5.4rem 3.8rem; } .vph-edge .vph-mix-head span:nth-child( 3 ), .vph-edge .vph-mix-track { display: none; } #btf-vph-holds .vph-table { padding: 1.2rem 1rem 1.1rem; } #btf-vph-holds .vph-hand { gap: .45rem; } #btf-vph-holds .vph-card { border-radius: 5px; } #btf-vph-holds .vph-card b { font-size: 1.45rem; } #btf-vph-holds .vph-card i { font-size: 1rem; } #btf-vph-holds .vph-picks { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } #btf-vph-holds .vph-chip { min-height: 44px; line-height: 1.25; } #btf-vph-holds .vph-deal { grid-column: 1 / -1; } #btf-vph-holds .vph-tab { min-height: 44px; } #btf-vph-holds .vph-answer { grid-template-columns: 1fr; gap: 1rem; padding: 1.2rem; } #btf-vph-holds .vph-badge { min-height: 4.4rem; font-size: 1.8rem; } #btf-vph-holds .vph-lead { font-size: 1.35rem; } #btf-vph-holds .vph-ev { grid-template-columns: 1.4rem minmax( 0, 1fr ) 4.4rem; gap: .6rem; } #btf-vph-holds .vph-ev-bar { display: none; } } @media ( max-width: 360px ) { #btf-vph-holds .vph-card b { font-size: 1.25rem; } #btf-vph-holds .vph-card i { font-size: .9rem; } #btf-vph-holds .vph-mini { width: 23px; height: 32px; } }