/** * Blackjack House Edge Calculator — /tools/blackjack-house-edge-calculator/ * * Scoped to #btf-bj-edge so nothing here can reach the rest of the site. * Same felt-and-cream language as the strategy calculator, but the order is * inverted: here the rules are the input, so they lead, and the answer sits * directly under them. */ #btf-bj-edge { --bje-felt: #1B3A2D; --bje-felt-2: #24493A; --bje-best: #1B3A2D; --bje-good: #2D5A1B; --bje-ok: #92700A; --bje-bad: #8B4A1B; --bje-worst: #8B2D2D; margin: 1.6rem 0 0; font-size: 1rem; } #btf-bj-edge .bje-intro { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.5; color: var( --ink2 ); } #btf-bj-edge .bje-h3 { font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 1.45rem; letter-spacing: -.01em; margin: 0 0 .35rem; color: var( --ink ); } #btf-bj-edge .bje-h3.on-felt { color: var( --on-dark ); } #btf-bj-edge .bje-sub { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.55; color: var( --ink2 ); } #btf-bj-edge .bje-eyebrow { display: block; font-family: 'JetBrains Mono', monospace; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var( --ink3 ); margin-bottom: .5rem; } #btf-bj-edge .bje-note { margin: 1rem 0 0; font-size: .8rem; line-height: 1.55; color: var( --ink3 ); } #btf-bj-edge .bje-note.on-felt { color: rgba( 247, 243, 232, .6 ); } #btf-bj-edge .bje-wait { margin: .6rem 0 0; font-family: 'JetBrains Mono', monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var( --ink3 ); } /* ── presets ────────────────────────────────────────────────────────────── */ #btf-bj-edge .bje-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .7rem; } #btf-bj-edge .bje-presets-k { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var( --ink3 ); margin-right: .3rem; } #btf-bj-edge .bje-preset { font: inherit; font-size: .82rem; padding: .42rem .8rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: 20px; color: var( --ink2 ); cursor: pointer; transition: all .12s; } #btf-bj-edge .bje-preset:hover { background: var( --felt ); border-color: var( --felt ); color: var( --on-dark ); } /* ── the rules, on felt ─────────────────────────────────────────────────── */ #btf-bj-edge .bje-felt { background: radial-gradient( ellipse at 50% 0%, var( --bje-felt-2 ), var( --bje-felt ) 70% ); border-radius: 18px; padding: 1.4rem 1.5rem; box-shadow: inset 0 0 0 1px rgba( 247, 243, 232, .08 ); } #btf-bj-edge .bje-rules { display: grid; grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) ); gap: 1rem 1.4rem; } #btf-bj-edge .bje-rule { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } #btf-bj-edge .bje-rule > span { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: rgba( 247, 243, 232, .7 ); } #btf-bj-edge .bje-rule select, #btf-bj-edge .bje-in select, #btf-bj-edge .bje-in input { font: inherit; font-size: .92rem; padding: .5rem .6rem; border-radius: 8px; width: 100%; background: #fff; color: var( --ink ); border: 1px solid var( --rule ); } #btf-bj-edge .bje-rule select { border-color: rgba( 247, 243, 232, .25 ); } /* ── the answer ─────────────────────────────────────────────────────────── */ #btf-bj-edge .bje-answer { margin-top: 1rem; display: grid; grid-template-columns: 12rem 1fr; gap: 1.4rem; align-items: start; padding: 1.4rem 1.5rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: 18px; } #btf-bj-edge .bje-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 8rem; border-radius: 14px; color: #fff; padding: .8rem .5rem; text-align: center; } #btf-bj-edge .bje-badge span { font-family: 'Instrument Serif', serif; font-weight: 500; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; } #btf-bj-edge .bje-badge i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .85; } #btf-bj-edge .t-best { background: var( --bje-best ); } #btf-bj-edge .t-good { background: var( --bje-good ); } #btf-bj-edge .t-ok { background: var( --bje-ok ); } #btf-bj-edge .t-bad { background: var( --bje-bad ); } #btf-bj-edge .t-worst { background: var( --bje-worst ); } #btf-bj-edge .bje-badge.is-wait { background: var( --bg3 ); color: var( --ink3 ); } #btf-bj-edge .bje-answer-body { min-width: 0; } #btf-bj-edge .bje-lead { margin: 0; font-family: 'Instrument Serif', serif; font-size: 1.3rem; line-height: 1.4; letter-spacing: -.01em; color: var( --ink ); } #btf-bj-edge .bje-why { margin: .7rem 0 0; font-size: .97rem; line-height: 1.55; color: var( --ink2 ); } #btf-bj-edge .bje-why b { color: var( --ink ); } #btf-bj-edge .bje-caveat { margin: .9rem 0 0; padding: .8rem 1rem; background: rgba( 146, 112, 10, .1 ); border-left: 3px solid var( --bje-ok ); border-radius: 0 8px 8px 0; font-size: .85rem; line-height: 1.55; color: var( --ink2 ); } /* ── money ──────────────────────────────────────────────────────────────── */ #btf-bj-edge .bje-money { margin-top: 2.2rem; } #btf-bj-edge .bje-inputs { display: grid; grid-template-columns: repeat( auto-fit, minmax( 11rem, 1fr ) ); gap: 1rem 1.4rem; margin-bottom: 1.2rem; } #btf-bj-edge .bje-in { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } #btf-bj-edge .bje-in > span { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var( --ink3 ); } #btf-bj-edge .bje-money-field { position: relative; display: block; } #btf-bj-edge .bje-money-field i { position: absolute; left: .65rem; top: 50%; transform: translateY( -50% ); font-style: normal; color: var( --ink3 ); font-size: .92rem; } #btf-bj-edge .bje-money-field:has( i ) input { padding-left: 1.5rem; } #btf-bj-edge .bje-figs { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } #btf-bj-edge .bje-fig { padding: 1rem 1.1rem; background: var( --bg2 ); border: 1px solid var( --rule ); border-radius: 12px; } #btf-bj-edge .bje-fig-wide { grid-column: 1 / -1; } #btf-bj-edge .bje-fig b { display: block; font-family: 'Instrument Serif', serif; font-weight: 400; font-size: 1.8rem; line-height: 1.1; color: var( --ink ); } #btf-bj-edge .bje-fig span { display: block; margin-top: .35rem; font-size: .82rem; line-height: 1.45; color: var( --ink3 ); } /* ── the ledger ─────────────────────────────────────────────────────────── */ #btf-bj-edge .bje-ledgerwrap { margin-top: 2.2rem; } #btf-bj-edge .bje-ledger { display: flex; flex-direction: column; } #btf-bj-edge .bje-row { display: grid; grid-template-columns: 1fr 10rem 5rem; gap: 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var( --rule ); } #btf-bj-edge .bje-row-k { font-size: .95rem; color: var( --ink ); min-width: 0; } #btf-bj-edge .bje-row-k i { display: block; font-style: normal; font-size: .78rem; color: var( --ink3 ); margin-top: .12rem; } #btf-bj-edge .bje-row-bar { position: relative; height: 16px; background: var( --bg3 ); border-radius: 4px; overflow: hidden; } #btf-bj-edge .bje-row-bar::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var( --rule ); } #btf-bj-edge .bje-row-bar b { position: absolute; top: 0; bottom: 0; display: block; } #btf-bj-edge .bje-row-bar b.pos { background: var( --bje-good ); border-radius: 0 4px 4px 0; } #btf-bj-edge .bje-row-bar b.neg { background: var( --bje-worst ); border-radius: 4px 0 0 4px; } #btf-bj-edge .bje-row-v { font-family: 'JetBrains Mono', monospace; font-size: .84rem; text-align: right; } #btf-bj-edge .bje-row-v.good { color: var( --bje-good ); } #btf-bj-edge .bje-row-v.bad { color: var( --bje-worst ); } #btf-bj-edge .bje-row.is-wait { opacity: .45; } /* ── the comparison, on felt ────────────────────────────────────────────── */ #btf-bj-edge .bje-comparewrap { margin-top: 2.2rem; padding: 1.4rem 1.5rem; background: var( --felt ); border-radius: 18px; color: var( --on-dark ); } #btf-bj-edge .bje-compare { margin-top: 1rem; } #btf-bj-edge .bje-cmp { display: grid; grid-template-columns: 1fr 5rem 5.5rem; gap: 1rem; align-items: center; padding: .7rem .8rem; border-bottom: 1px solid rgba( 247, 243, 232, .12 ); border-radius: 8px; } #btf-bj-edge .bje-cmp-name { font-size: .95rem; min-width: 0; } #btf-bj-edge .bje-cmp-name i { display: block; font-style: normal; font-size: .78rem; color: rgba( 247, 243, 232, .6 ); margin-top: .12rem; } #btf-bj-edge .bje-cmp-v, #btf-bj-edge .bje-cmp-gap { font-family: 'JetBrains Mono', monospace; font-size: .84rem; text-align: right; } #btf-bj-edge .bje-cmp-gap { color: rgba( 247, 243, 232, .6 ); } #btf-bj-edge .bje-cmp.is-head { padding-top: 0; padding-bottom: .45rem; border-bottom-color: rgba( 247, 243, 232, .25 ); } #btf-bj-edge .bje-cmp.is-head span { font-family: 'JetBrains Mono', monospace; font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: rgba( 244, 239, 230, .45 ); } #btf-bj-edge .bje-cmp.is-you { background: rgba( 212, 180, 74, .16 ); box-shadow: inset 0 0 0 1px #C9A24A; } #btf-bj-edge .bje-cmp.is-you .bje-cmp-name { font-weight: 700; } /* ── text selection on the dark panels ──────────────────────────────────── */ /* base.css gives every panel a faint green tint with ink-dark text and only overrides it for .section-felt and .hero. Same gold-on-dark treatment here. */ #btf-bj-edge .bje-felt ::selection, #btf-bj-edge .bje-felt::selection, #btf-bj-edge .bje-comparewrap ::selection, #btf-bj-edge .bje-comparewrap::selection, #btf-bj-edge .bje-badge ::selection, #btf-bj-edge .bje-badge::selection, #btf-bj-edge .bje-preset:hover::selection { background: rgba( 212, 180, 74, .4 ); color: var( --on-dark ); } /* the selects sit on the felt but are light themselves */ #btf-bj-edge .bje-rule select::selection { background: rgba( 27, 58, 45, .15 ); color: var( --ink ); } /* ── narrow ─────────────────────────────────────────────────────────────── */ @media ( max-width: 700px ) { #btf-bj-edge .bje-answer { grid-template-columns: 1fr; gap: 1rem; } #btf-bj-edge .bje-badge { min-height: 5.4rem; flex-direction: row; gap: .8rem; } #btf-bj-edge .bje-badge span { font-size: 2.2rem; } #btf-bj-edge .bje-lead { font-size: 1.15rem; } #btf-bj-edge .bje-figs { grid-template-columns: 1fr; } #btf-bj-edge .bje-row { grid-template-columns: 1fr 4.5rem; } #btf-bj-edge .bje-row-bar { display: none; } #btf-bj-edge .bje-cmp { grid-template-columns: 1fr 4.2rem 4.6rem; gap: .5rem; padding: .7rem .5rem; } #btf-bj-edge .bje-comparewrap { padding: 1.2rem 1rem; } }