/* ── Card counting — scoped page styles ─────────────────── /blackjack/strategy/card-counting/, scoped under body.btf-bjcc-page. Rebuilt 2026-09-26 from the card-counting mock (seo-research/ blackjack-card-counting): the Hi-Lo key on felt, a guided ten-card lesson, the true-count desk on a tinted band, the decision rows, the shuffle list and shoe diagram, a felt practice desk, the legal note. Hero chrome shared with texas-holdem.css; serif for headings and display figures, Outfit for body and component text, mono for labels. The mock's cc- class names are kept; nothing else in the theme uses them. NOTE: do NOT alias --ink (circular with texas-holdem's --th-ink). ──────────────────────────────────────────────────────────────────────── */ body.btf-bjcc-page { --forest: var( --th-forest ); --forest-2: #355642; --gold: var( --th-gold ); --gold-soft: var( --th-gold-soft ); --cream: var( --th-cream ); --cream-2: var( --th-cream-2 ); --ink-2: var( --th-ink-2 ); --muted: var( --th-muted ); --hair: var( --th-hair ); --line: rgba( 28, 24, 20, .14 ); --red: var( --th-red ); --serif: var( --th-serif ); --sans: var( --th-sans ); --mono: var( --th-mono ); --radius: var( --th-radius ); --radius-lg: var( --th-radius-lg ); --card-face: #FDFBF7; --tint: #ECE6DA; } /* ── shared bits ────────────────────────────────────────────────────────── */ body.btf-bjcc-page .cc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset( 50% ); white-space: nowrap; } body.btf-bjcc-page .cc-label { display: block; font-family: var( --mono ); font-size: .63rem; line-height: 1.7; letter-spacing: .06em; text-transform: uppercase; color: var( --muted ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-fine { font-size: .78rem; line-height: 1.65; color: var( --muted ); } body.btf-bjcc-page .bjcc-tool [hidden] { display: none !important; } body.btf-bjcc-page .bjcc-tool button { cursor: pointer; } body.btf-bjcc-page .bjcc-tool button:disabled { opacity: .55; cursor: default; } body.btf-bjcc-page .bjcc-tool :focus-visible, body.btf-bjcc-page .bjcc-faq summary:focus-visible, body.btf-bjcc-page .cc-hero-links a:focus-visible { outline: 3px solid var( --gold-soft ); outline-offset: 3px; } body.btf-bjcc-page .cc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .7rem 1.1rem; border: 1px solid var( --line ); border-radius: 8px; background: var( --cream ); font-family: var( --sans ); font-size: .81rem; font-weight: 600; line-height: 1.5; color: var( --forest ); } body.btf-bjcc-page .cc-btn:hover { background: #E7E0D2; } body.btf-bjcc-page .cc-btn-primary { background: var( --forest ); border-color: var( --forest ); color: var( --cream ); } body.btf-bjcc-page .cc-btn-primary:hover { background: var( --forest-2 ); } body.btf-bjcc-page .cc-btn-light { background: var( --cream ); border-color: var( --cream ); color: var( --forest ); } body.btf-bjcc-page .cc-text-button { min-height: 44px; padding: .5rem .15rem; border: 0; background: transparent; font-family: var( --sans ); font-size: .75rem; color: var( --forest ); text-decoration: underline; text-underline-offset: 4px; } body.btf-bjcc-page .cc-text-button:hover { text-decoration-thickness: 2px; } /* ── hero ───────────────────────────────────────────────────────────────── */ /* texas-holdem.css zeroes every `.prose p` at (0,2,2); hero paragraphs carry the hero-prose or key ancestor so their margins win. */ body.btf-bjcc-page .btf-th-hero-prose .hero-intro { margin: 0 0 1.3rem; } body.btf-bjcc-page .btf-th-hero-prose .bjcc-quick { font-family: var( --sans ); font-size: .95rem; line-height: 1.7; color: rgba( 244, 239, 230, .85 ); max-width: 52ch; margin: 0 0 1.8rem; } body.btf-bjcc-page .bjcc-quick b { color: #fff; } body.btf-bjcc-page .btf-bjcc-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; } body.btf-bjcc-page .btf-bjcc-hero-cta a { min-height: 44px; } /* the Hi-Lo key on felt */ body.btf-bjcc-page .cc-hero-key { padding: 1.5rem 1.6rem 1.1rem; background: rgba( 244, 239, 230, .03 ); border: 1px solid rgba( 244, 239, 230, .16 ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .btf-bjcc-hero-viz-title { display: block; margin-bottom: .7rem; font-family: var( --mono ); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var( --gold-soft ); } body.btf-bjcc-page .cc-key-row { display: grid; grid-template-columns: 44px 1fr 42px; gap: 1.05rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid rgba( 244, 239, 230, .12 ); } body.btf-bjcc-page .cc-mini-card { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; height: 59px; background: var( --card-face ); border: 1px solid #EEE7D0; border-radius: 5px; box-shadow: 0 2px 0 rgba( 0, 0, 0, .13 ); font-family: var( --serif ); font-size: 1.5rem; line-height: 1; color: var( --forest ); } body.btf-bjcc-page .cc-mini-card span { margin-top: 3px; font-family: Georgia, serif; font-size: 1rem; line-height: 1.2; } body.btf-bjcc-page .cc-mini-card.red { color: var( --red ); } body.btf-bjcc-page .cc-key-ranks { display: block; font-family: var( --sans ); font-size: .875rem; letter-spacing: .03em; white-space: nowrap; color: var( --cream ); } body.btf-bjcc-page .cc-key-row small { display: block; margin-top: .3rem; font-family: var( --sans ); font-size: .69rem; color: #C1CFBC; } body.btf-bjcc-page .btf-bjcc-hero .cc-key-row > strong { font-family: var( --serif ); font-weight: 400; font-size: 2.5rem; line-height: 1; text-align: right; color: #E8D4A7; font-variant-numeric: lining-nums; } body.btf-bjcc-page .cc-hero-key .cc-key-note { margin: 1.1rem 0; font-family: var( --sans ); font-size: .75rem; line-height: 1.75; color: #C5D2C1; } body.btf-bjcc-page .cc-hero-key .cc-key-note b { color: var( --cream ); } body.btf-bjcc-page .cc-hero-note { display: flex; align-items: center; justify-content: center; gap: 1.05rem; padding-top: .8rem; border-top: 1px solid rgba( 244, 239, 230, .12 ); color: #CBCFB7; } body.btf-bjcc-page .cc-hero-note > span { font-family: var( --mono ); font-size: .56rem; line-height: 1.7; letter-spacing: .06em; } body.btf-bjcc-page .btf-bjcc-hero .cc-hero-note > strong { font-family: var( --serif ); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var( --cream ); } body.btf-bjcc-page .cc-hero-links { display: flex; flex-wrap: wrap; gap: .75rem 1.45rem; margin-top: 1.9rem; padding-top: 1.5rem; border-top: 1px solid rgba( 244, 239, 230, .12 ); font-family: var( --sans ); font-size: .75rem; } body.btf-bjcc-page .cc-hero-links > span { color: #B7C6B1; } /* texas-holdem strips hero links to plain text at (0,6,2); these keep their underline */ body.btf-bjcc-page .btf-bjcc-hero .wrap .cc-hero-links a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { color: #E1E8D8; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; } /* ── section rhythm: paper, hairline between sections ───────────────────── */ body.btf-bjcc-page .btf-bjcc-section { padding: 3.6rem 0 3.4rem; border-bottom: 1px solid var( --hair ); scroll-margin-top: 80px; } body.btf-bjcc-page .btf-bjcc-section .btf-th-eyebrow { margin-bottom: .9rem; } body.btf-bjcc-page .btf-bjcc-section h2.btf-th-display { margin: 0 0 .55em; font-size: clamp( 1.7rem, 3.4vw, 2.4rem ); } body.btf-bjcc-page .btf-bjcc-section .btf-th-lede { margin: 0 0 1.7rem; color: var( --ink-2 ); max-width: 72ch; } body.btf-bjcc-page .btf-bjcc-section .wrap p { font-family: var( --sans ); font-size: 1rem; line-height: 1.7; color: var( --ink-2 ); max-width: 68ch; margin: 0 0 1.15em; } body.btf-bjcc-page .btf-bjcc-section .wrap p:last-child { margin-bottom: 0; } body.btf-bjcc-page .btf-bjcc-section .wrap p b, body.btf-bjcc-page .btf-bjcc-section .wrap li b { color: var( --th-ink ); } body.btf-bjcc-page .btf-bjcc-section .wrap p a { color: var( --forest ); font-weight: 600; } body.btf-bjcc-page .btf-bjcc-section h3 { margin: 0 0 .85rem; font-family: var( --serif ); font-weight: 400; font-size: 1.7rem; line-height: 1.2; color: var( --forest ); } body.btf-bjcc-page .cc-section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 3.3rem; align-items: end; margin-bottom: 1.9rem; } body.btf-bjcc-page .btf-bjcc-section .cc-section-heading h2.btf-th-display { margin-bottom: 0; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-section-heading > p { font-size: .94rem; line-height: 1.8; max-width: 58ch; margin: 0; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-noscript { margin: 0 0 1.2rem; color: var( --red ); } /* ── the guided lesson ──────────────────────────────────────────────────── */ body.btf-bjcc-page .cc-lesson { padding: 1.75rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .cc-tool-head { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var( --line ); } body.btf-bjcc-page .btf-bjcc-section .cc-tool-head h3 { margin: .5rem 0 0; font-size: 1.8rem; } body.btf-bjcc-page .cc-counter { font-family: var( --mono ); font-size: .69rem; line-height: 1.6; color: var( --muted ); white-space: nowrap; } body.btf-bjcc-page .cc-lesson-main { display: grid; grid-template-columns: 165px 1fr; gap: 2.4rem; align-items: center; padding: 1.9rem 0 1.45rem; } body.btf-bjcc-page .cc-current-wrap { display: flex; flex-direction: column; align-items: center; gap: .9rem; } body.btf-bjcc-page .cc-current-wrap > .cc-label { font-size: .56rem; text-align: center; } /* playing cards */ body.btf-bjcc-page .cc-big-card { position: relative; flex: none; display: grid; place-items: center; width: 119px; height: 166px; background: var( --card-face ); border: 1px solid #C8C2B6; border-radius: 9px; box-shadow: 0 4px 0 #DED7C7; font-family: var( --serif ); font-size: 4.4rem; line-height: 1; color: var( --forest ); } body.btf-bjcc-page .cc-big-card.red { color: var( --red ); } body.btf-bjcc-page .cc-big-card .cc-corner { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var( --serif ); font-size: 1.4rem; line-height: 1; } body.btf-bjcc-page .cc-big-card .cc-corner small { font-family: Georgia, serif; font-size: .875rem; } body.btf-bjcc-page .cc-big-card .cc-corner.bottom { top: auto; left: auto; right: 10px; bottom: 10px; transform: rotate( 180deg ); } body.btf-bjcc-page .cc-big-card > .cc-pip { font-family: Georgia, serif; font-size: 3.7rem; line-height: 1; } body.btf-bjcc-page .cc-big-card.cc-back { border: 7px solid var( --card-face ); outline: 1px solid #C8C2B6; background: repeating-linear-gradient( 45deg, #355642 0, #355642 2px, #2A4838 2px, #2A4838 9px ); color: #B4C2A8; } body.btf-bjcc-page .cc-big-card.cc-back > span { display: grid; place-items: center; width: 70px; height: 90px; border: 1px solid rgba( 156, 172, 139, .5 ); border-radius: 50%; font-family: Georgia, serif; font-size: 2.8rem; } body.btf-bjcc-page .cc-count-equation { display: flex; align-items: center; justify-content: space-between; gap: .9rem; max-width: 650px; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid #D4CDBE; } body.btf-bjcc-page .cc-count-equation > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .5rem; } body.btf-bjcc-page .cc-count-equation > div > span { font-family: var( --sans ); font-size: .69rem; text-align: center; color: var( --muted ); } body.btf-bjcc-page .cc-count-equation strong { font-family: var( --serif ); font-weight: 400; font-size: 3rem; line-height: 1; color: var( --forest ); } body.btf-bjcc-page .cc-count-equation .cc-total strong { color: var( --gold ); } body.btf-bjcc-page .cc-equation-plus { font-family: var( --serif ); font-size: 1.45rem; color: #908B7E; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-lesson-text { font-size: .875rem; min-height: 48px; max-width: 65ch; margin: 0 0 .95rem; } body.btf-bjcc-page .cc-tool-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; } body.btf-bjcc-page .cc-card-trail { display: grid; grid-template-columns: repeat( 10, 1fr ); gap: .7rem; margin: 0; padding: 1.2rem 0 0; border-top: 1px solid var( --line ); list-style: none; } body.btf-bjcc-page .cc-card-trail > li { min-width: 0; margin: 0; } body.btf-bjcc-page .cc-trail-card { display: flex; align-items: center; justify-content: center; gap: 3px; height: 59px; background: var( --card-face ); border: 1px solid #C9C4B8; border-radius: 5px; font-family: var( --serif ); font-size: 1.55rem; color: var( --forest ); } body.btf-bjcc-page .cc-trail-card.red { color: var( --red ); } body.btf-bjcc-page .cc-trail-card span { font-family: Georgia, serif; font-size: .81rem; } body.btf-bjcc-page .cc-trail-card.unseen { background: #E7E2D7; border-style: dashed; font-family: var( --mono ); font-size: .69rem; color: #8F8A7C; } body.btf-bjcc-page .cc-card-trail small { display: block; min-height: 16px; margin-top: .45rem; font-family: var( --mono ); font-size: .56rem; text-align: center; color: var( --muted ); } body.btf-bjcc-page .cc-card-trail li.current .cc-trail-card { outline: 2px solid var( --gold ); outline-offset: 2px; } body.btf-bjcc-page .cc-lesson-bottom { display: flex; justify-content: space-between; gap: 1.25rem; margin-top: 1.25rem; padding-top: 1.05rem; border-top: 1px solid var( --line ); font-family: var( --sans ); font-size: .69rem; color: var( --muted ); } body.btf-bjcc-page .btf-bjcc-section .cc-lesson-bottom a { color: var( --forest ); font-weight: 500; } body.btf-bjcc-page .cc-copy-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 3.2rem; margin-top: 2.3rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-copy-columns p { font-size: .94rem; } body.btf-bjcc-page .cc-plain-list { margin: 0; padding: 0; list-style: none; } body.btf-bjcc-page .cc-plain-list li { position: relative; margin: 0; padding: 0 0 .8rem 1.05rem; font-family: var( --sans ); font-size: .94rem; line-height: 1.7; color: var( --ink-2 ); } body.btf-bjcc-page .cc-plain-list li::before { content: '\2014'; position: absolute; left: 0; color: var( --gold ); } /* ── the true count, on a tinted band ───────────────────────────────────── */ body.btf-bjcc-page .btf-bjcc-section.cc-tinted { background: var( --tint ); } body.btf-bjcc-page .cc-tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.3rem; align-items: start; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-tc-copy > p { font-size: .94rem; } body.btf-bjcc-page .cc-formula { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.45rem; padding: .95rem 0 1.4rem; border-bottom: 1px solid #CBC9BA; font-family: var( --mono ); font-size: .75rem; line-height: 1.7; color: var( --forest ); } body.btf-bjcc-page .cc-formula strong { font-weight: 500; color: var( --gold ); } body.btf-bjcc-page .cc-count-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.75rem 0; } body.btf-bjcc-page .cc-count-comparison > div { padding-top: .8rem; border-top: 2px solid var( --gold-soft ); } body.btf-bjcc-page .cc-count-comparison span { font-family: var( --sans ); font-size: .75rem; color: var( --muted ); } body.btf-bjcc-page .btf-bjcc-section .cc-count-comparison strong { display: block; margin-top: .6rem; font-family: var( --serif ); font-weight: 400; font-size: 3.4rem; line-height: 1.2; color: var( --forest ); } body.btf-bjcc-page .cc-tc-panel { padding: 1.6rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .btf-bjcc-section .cc-tc-panel h3 { margin-bottom: 1.25rem; } body.btf-bjcc-page .cc-tc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .95rem; } body.btf-bjcc-page .cc-field { display: flex; flex-direction: column; justify-content: space-between; gap: .5rem; font-family: var( --sans ); font-size: .81rem; line-height: 1.5; color: var( --ink-2 ); } body.btf-bjcc-page .cc-field input, body.btf-bjcc-page .cc-field select { width: 100%; min-width: 0; min-height: 44px; padding: .6rem .75rem; background: #fff; border: 1px solid #BDBDAE; border-radius: 7px; font-family: var( --sans ); font-size: 1rem; color: var( --th-ink ); } body.btf-bjcc-page .cc-field select { font-size: .875rem; } body.btf-bjcc-page .cc-field input[aria-invalid="true"] { border-color: var( --red ); outline: 1px solid var( --red ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-tc-panel #bjcc-tc-help { font-size: .69rem; margin: .6rem 0 .95rem; } body.btf-bjcc-page .cc-presets { display: flex; flex-wrap: wrap; gap: .45rem; } body.btf-bjcc-page .cc-presets button { min-height: 44px; padding: .45rem .65rem; background: var( --cream ); border: 1px solid var( --line ); border-radius: 5px; font-family: var( --sans ); font-size: .69rem; color: var( --forest ); } body.btf-bjcc-page .cc-presets button:hover { background: #E8E2D4; } body.btf-bjcc-page .cc-tc-result { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var( --line ); } body.btf-bjcc-page .btf-bjcc-section .cc-tc-result > strong { display: block; margin: .5rem 0; font-family: var( --serif ); font-weight: 400; font-size: 4rem; line-height: 1.15; color: var( --forest ); font-variant-numeric: tabular-nums; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-tc-result #bjcc-tc-equation { font-family: var( --mono ); font-size: .75rem; line-height: 1.7; color: var( --forest ); margin: 0 0 .8rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-tc-result #bjcc-tc-context { font-size: .81rem; color: var( --muted ); margin: 0; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-error { margin: 1.25rem 0 0; padding: .75rem; border-left: 3px solid var( --red ); background: #F6ECE4; font-size: .81rem; color: var( --red ); } body.btf-bjcc-page .cc-rounding { margin-top: 1.3rem; padding-top: .75rem; border-top: 1px solid var( --line ); } body.btf-bjcc-page .cc-rounding summary { min-height: 44px; padding: .5rem 0; cursor: pointer; font-family: var( --sans ); font-size: .75rem; line-height: 1.7; color: var( --forest ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-rounding p { font-size: .75rem; line-height: 1.8; margin: .75rem 0; } body.btf-bjcc-page .cc-rounding .cc-field { margin: .95rem 0 .6rem; } body.btf-bjcc-page .cc-rounding select { font-size: .75rem; } /* ── using the count ────────────────────────────────────────────────────── */ body.btf-bjcc-page .cc-decision-rows { margin-top: 1.75rem; } body.btf-bjcc-page .cc-decision-rows article { display: grid; grid-template-columns: 175px 1fr; gap: 1.9rem; padding: 1.8rem 0; border-top: 1px solid var( --line ); } body.btf-bjcc-page .cc-row-label { padding-top: .45rem; font-family: var( --mono ); font-size: .63rem; line-height: 1.7; letter-spacing: .06em; text-transform: uppercase; color: var( --gold ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-decision-rows p { font-size: .94rem; max-width: 80ch; margin-bottom: .8rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-decision-rows p:last-child { margin-bottom: 0; } body.btf-bjcc-page .cc-margin-note { display: grid; grid-template-columns: 155px 1fr; gap: 1.55rem; margin-top: .5rem; padding: 1.2rem 1.45rem; background: var( --cream-2 ); border-left: 3px solid var( --gold ); } body.btf-bjcc-page .cc-margin-note .cc-label { padding-top: .25rem; color: var( --gold ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-margin-note p { font-size: .875rem; margin: 0; max-width: none; } body.btf-bjcc-page .cc-money-story { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3.4rem; margin-top: 2.9rem; padding-top: 3rem; border-top: 1px solid var( --line ); } body.btf-bjcc-page .btf-bjcc-section .cc-money-story h3 { font-size: 2rem; margin-bottom: 1.05rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-money-story p { font-size: .94rem; } body.btf-bjcc-page .btf-bjcc-section .cc-inline-link { display: inline-block; margin-top: .3rem; font-family: var( --sans ); font-size: .81rem; font-weight: 600; color: var( --forest ); } body.btf-bjcc-page .cc-ev-note { align-self: start; padding: 1.55rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .cc-ev-note > .cc-label { margin-bottom: .9rem; color: var( --gold ); } body.btf-bjcc-page .cc-ev-note > div { display: flex; justify-content: space-between; align-items: center; gap: 1.1rem; padding: .95rem 0; border-bottom: 1px solid var( --line ); } body.btf-bjcc-page .cc-ev-note > div > span { font-family: var( --sans ); font-size: .75rem; color: var( --muted ); } body.btf-bjcc-page .btf-bjcc-section .cc-ev-note > div > strong { font-family: var( --serif ); font-weight: 400; font-size: 1.75rem; line-height: 1.1; color: var( --forest ); } body.btf-bjcc-page .btf-bjcc-section .cc-ev-note > div.cc-ev-total > strong { font-size: 2.75rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-ev-note > p { font-size: .69rem; line-height: 1.7; color: var( --muted ); margin: .95rem 0 0; } /* ── which games keep the information ───────────────────────────────────── */ body.btf-bjcc-page .cc-shuffle-list { border-top: 1px solid var( --line ); } body.btf-bjcc-page .cc-shuffle-list article { display: grid; grid-template-columns: 40px 1fr 163px; gap: 1.2rem; align-items: start; padding: 1.45rem 0; border-bottom: 1px solid var( --line ); } body.btf-bjcc-page .cc-status-mark { padding-top: .45rem; font-family: var( --mono ); font-size: .75rem; color: var( --gold ); } body.btf-bjcc-page .btf-bjcc-section .cc-shuffle-list h3 { font-size: 1.6rem; margin: 0 0 .75rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-shuffle-list p { font-size: .875rem; line-height: 1.75; margin: 0; max-width: 77ch; } body.btf-bjcc-page .cc-status { margin-top: .2rem; padding: .5rem .6rem; background: #EDF0E4; border: 1px solid #C8CFBC; border-radius: 5px; font-family: var( --mono ); font-size: .63rem; line-height: 1.6; text-align: center; color: var( --forest ); } body.btf-bjcc-page .cc-status.muted { background: #F0E7DC; border-color: #E1CFBA; color: #7F5932; } body.btf-bjcc-page .cc-depth { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3.4rem; align-items: start; margin-top: 2.45rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-depth p { font-size: .94rem; } body.btf-bjcc-page .cc-shoe-diagram { padding: 1.5rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .cc-six-decks { display: grid; grid-template-columns: repeat( 6, 1fr ); gap: 5px; margin: 1.4rem 0 .75rem; } body.btf-bjcc-page .cc-six-decks > span { height: 78px; border: 1px solid #ACB5A3; border-radius: 4px; background: repeating-linear-gradient( 0deg, #668061 0, #668061 3px, #526C4C 3px, #526C4C 4px ); } body.btf-bjcc-page .cc-six-decks > span.half { background: linear-gradient( 0deg, transparent 50%, #E0DACE 50% ), repeating-linear-gradient( 0deg, #668061 0, #668061 3px, #526C4C 3px, #526C4C 4px ); } body.btf-bjcc-page .cc-six-decks > span.undealt { background: #E0DACE; } body.btf-bjcc-page .cc-shoe-labels { display: flex; justify-content: space-between; gap: .75rem; font-family: var( --sans ); font-size: .63rem; color: var( --muted ); } body.btf-bjcc-page .cc-shoe-labels i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; border-radius: 2px; background: #668061; } body.btf-bjcc-page .cc-shoe-labels > span + span i { background: #D6D0C5; border: 1px solid #AAA; } body.btf-bjcc-page .btf-bjcc-section .cc-shoe-diagram > strong { display: block; margin: 1.05rem 0 .3rem; font-family: var( --serif ); font-weight: 400; font-size: 3.6rem; line-height: 1.2; color: var( --forest ); } body.btf-bjcc-page .cc-shoe-diagram > strong > span { font-size: 2rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-shoe-diagram > p { font-size: .69rem; line-height: 1.75; color: var( --muted ); margin: 0; } /* ── the practice desk, on felt ─────────────────────────────────────────── */ body.btf-bjcc-page .btf-bjcc-section.cc-practice-section { background: var( --forest ); border-bottom: 0; padding: 3.7rem 0 2.7rem; color: var( --cream ); } body.btf-bjcc-page .cc-practice-section .btf-th-eyebrow { color: var( --gold-soft ); } body.btf-bjcc-page .cc-practice-section .btf-th-eyebrow::before { background: var( --gold-soft ); } body.btf-bjcc-page .btf-bjcc-section.cc-practice-section h2.btf-th-display { color: var( --cream ); } body.btf-bjcc-page .btf-bjcc-section.cc-practice-section h2.btf-th-display em { color: var( --gold-soft ); } body.btf-bjcc-page .btf-bjcc-section.cc-practice-section .wrap .cc-section-heading > p { color: #D4DFCF; } body.btf-bjcc-page .cc-practice-desk { display: grid; grid-template-columns: 1.12fr 1fr; background: rgba( 244, 239, 230, .03 ); border: 1px solid rgba( 244, 239, 230, .16 ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .cc-practice-left { padding: 1.7rem 1.9rem; } body.btf-bjcc-page .cc-practice-top { display: flex; align-items: center; justify-content: space-between; gap: 1.1rem; } body.btf-bjcc-page .cc-practice-top > span:last-child { font-family: var( --mono ); font-size: .69rem; color: #CFDBBD; } body.btf-bjcc-page .cc-practice-section .cc-label { font-size: .56rem; color: #C3CDB6; } body.btf-bjcc-page .cc-practice-stage { display: flex; align-items: center; gap: 2.5rem; margin: 2rem 0 1.75rem; } body.btf-bjcc-page .cc-practice-stage .cc-big-card { box-shadow: 0 4px 0 #152A21; } body.btf-bjcc-page .cc-practice-answer { flex: 1; } body.btf-bjcc-page .btf-bjcc-section .cc-practice-answer > strong { display: block; margin: .4rem 0; font-family: var( --serif ); font-weight: 400; font-size: 3.9rem; line-height: 1.15; color: #E7D1A2; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-practice-answer > p { min-height: 42px; margin: 0; font-size: .75rem; line-height: 1.7; color: #CAD8BF; } body.btf-bjcc-page .cc-practice-left .cc-tool-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } body.btf-bjcc-page .cc-practice-left .cc-btn { padding: .7rem .8rem; white-space: nowrap; } body.btf-bjcc-page .cc-btn.cc-practice-reveal { background: transparent; border-color: rgba( 244, 239, 230, .3 ); color: var( --cream ); } body.btf-bjcc-page .cc-btn.cc-practice-reveal:hover { background: rgba( 244, 239, 230, .06 ); } body.btf-bjcc-page .cc-practice-secondary { display: flex; justify-content: space-between; gap: 1.25rem; margin-top: .6rem; } body.btf-bjcc-page .cc-practice-secondary .cc-text-button { color: #D8E2CB; font-size: .69rem; } body.btf-bjcc-page .cc-progress-track { height: 4px; margin-top: .9rem; overflow: hidden; background: rgba( 244, 239, 230, .09 ); border-radius: 4px; } body.btf-bjcc-page .cc-progress-track > span { display: block; width: 0; height: 100%; background: var( --gold-soft ); transition: width .18s; } body.btf-bjcc-page .cc-practice-right { padding: 1.7rem 1.8rem; border-left: 1px solid rgba( 244, 239, 230, .14 ); } body.btf-bjcc-page .cc-recent-cards { display: flex; align-items: center; gap: .55rem; min-height: 78px; margin: .9rem 0 1.1rem; } body.btf-bjcc-page .cc-recent-cards > .cc-mini-card { width: 43px; height: 60px; font-size: 1.5rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-recent-cards > p { margin: 0; font-size: .75rem; color: #BBCCB3; } body.btf-bjcc-page .cc-practice-key { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1.3rem; padding: .75rem 0; border-top: 1px solid rgba( 244, 239, 230, .14 ); border-bottom: 1px solid rgba( 244, 239, 230, .14 ); font-family: var( --sans ); font-size: .69rem; color: #C5D0BA; } body.btf-bjcc-page .cc-practice-key b { padding-left: 5px; font-family: var( --mono ); font-size: .875rem; font-weight: 500; color: #E7D1A2; } body.btf-bjcc-page .btf-bjcc-section .cc-practice-right h3 { margin-bottom: .8rem; font-size: 1.6rem; color: var( --cream ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-practice-right > p { font-size: .75rem; line-height: 1.8; color: #CCD8C1; margin-bottom: .75rem; } body.btf-bjcc-page .cc-practice-history { margin-top: 1.1rem; padding-top: .55rem; border-top: 1px solid rgba( 244, 239, 230, .14 ); } body.btf-bjcc-page .cc-practice-history summary { min-height: 44px; padding: .5rem 0; cursor: pointer; font-family: var( --sans ); font-size: .75rem; color: #E2E9D8; } body.btf-bjcc-page .cc-practice-history ol { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0; padding: 0; list-style: none; font-family: var( --mono ); font-size: .75rem; color: #E5EADA; } body.btf-bjcc-page .cc-practice-history li { margin: 0; padding: .3rem .45rem; border: 1px solid rgba( 244, 239, 230, .14 ); border-radius: 4px; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-practice-history > p { font-size: .69rem; line-height: 1.75; color: #C5CFBB; margin: .5rem 0; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-practice-footnote { max-width: 112ch; margin: 1.2rem 0 0; font-size: .69rem; line-height: 1.8; color: #BDCDB4; } body.btf-bjcc-page .cc-practice-section :focus-visible { outline-color: #E7D1A2; } /* ── law and casinos ────────────────────────────────────────────────────── */ body.btf-bjcc-page .cc-legal-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 3.4rem; align-items: start; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-legal-grid > div > p { font-size: .94rem; } body.btf-bjcc-page .cc-legal-note { margin-top: 2.2rem; padding: 1.55rem; background: var( --cream-2 ); border: 1px solid var( --hair ); border-radius: var( --radius-lg ); } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-legal-note p { font-size: .875rem; } /* ── questions ──────────────────────────────────────────────────────────── */ body.btf-bjcc-page .bjcc-faq { margin-top: 1.5rem; } body.btf-bjcc-page .bjcc-faq details { border-bottom: 1px solid var( --hair ); } body.btf-bjcc-page .bjcc-faq details:first-child { border-top: 1px solid var( --hair ); } body.btf-bjcc-page .bjcc-faq summary { position: relative; list-style: none; cursor: pointer; font-family: var( --sans ); font-size: 1.02rem; font-weight: 600; line-height: 1.5; color: var( --th-ink ); padding: 1.15rem 2.4rem 1.15rem 0; } body.btf-bjcc-page .bjcc-faq summary::-webkit-details-marker { display: none; } body.btf-bjcc-page .bjcc-faq summary::after { content: '+'; position: absolute; right: .2rem; top: .9rem; font-family: var( --serif ); font-size: 1.6rem; line-height: 1; color: var( --gold ); } body.btf-bjcc-page .bjcc-faq details[open] summary::after { content: '\2212'; } body.btf-bjcc-page .btf-bjcc-section .wrap .bjcc-faq p { font-size: .95rem; max-width: 77ch; margin: 0 0 1.3rem; padding-right: 1.5rem; } /* ── responsive ─────────────────────────────────────────────────────────── */ @media ( max-width: 1050px ) { body.btf-bjcc-page .cc-hero-key { padding: 1.35rem; } body.btf-bjcc-page .cc-key-row { grid-template-columns: 40px 1fr 37px; gap: .75rem; } body.btf-bjcc-page .cc-key-ranks { font-size: .75rem; } body.btf-bjcc-page .cc-key-row small { font-size: .63rem; } body.btf-bjcc-page .btf-bjcc-hero .cc-key-row > strong { font-size: 2.1rem; } body.btf-bjcc-page .cc-section-heading, body.btf-bjcc-page .cc-tc-grid, body.btf-bjcc-page .cc-copy-columns { gap: 2.2rem; } body.btf-bjcc-page .cc-money-story, body.btf-bjcc-page .cc-depth, body.btf-bjcc-page .cc-legal-grid { gap: 2rem; } body.btf-bjcc-page .cc-practice-left, body.btf-bjcc-page .cc-practice-right { padding: 1.5rem; } body.btf-bjcc-page .cc-practice-stage { gap: 1.55rem; } body.btf-bjcc-page .cc-practice-key { gap: .5rem; font-size: .63rem; } body.btf-bjcc-page .cc-practice-key b { font-size: .75rem; } body.btf-bjcc-page .cc-practice-left .cc-btn { padding: .7rem .6rem; font-size: .75rem; } body.btf-bjcc-page .cc-decision-rows article { grid-template-columns: 145px 1fr; } } @media ( max-width: 800px ) { body.btf-bjcc-page .btf-bjcc-section { padding: 2.8rem 0 2.6rem; } } @media ( max-width: 760px ) { body.btf-bjcc-page .cc-hero-key { max-width: 33rem; padding: 1.5rem 1.75rem; } body.btf-bjcc-page .cc-key-row { grid-template-columns: 44px 1fr 46px; gap: 1.35rem; } body.btf-bjcc-page .cc-key-ranks { font-size: 1rem; } body.btf-bjcc-page .cc-key-row small { font-size: .75rem; } body.btf-bjcc-page .btf-bjcc-hero .cc-key-row > strong { font-size: 2.6rem; } body.btf-bjcc-page .cc-hero-links { gap: .6rem 1.25rem; font-size: .69rem; } body.btf-bjcc-page .cc-hero-links > span { width: 100%; } body.btf-bjcc-page .cc-section-heading { grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.6rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-section-heading > p { max-width: 69ch; } body.btf-bjcc-page .cc-lesson { padding: 1.45rem; } body.btf-bjcc-page .cc-lesson-main { grid-template-columns: 120px 1fr; gap: 1.55rem; } body.btf-bjcc-page .cc-lesson .cc-big-card { width: 100px; height: 142px; } body.btf-bjcc-page .cc-count-equation { gap: .55rem; } body.btf-bjcc-page .cc-count-equation strong { font-size: 2.55rem; } body.btf-bjcc-page .cc-count-equation > div > span { font-size: .63rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-lesson-text { font-size: .81rem; } body.btf-bjcc-page .cc-tool-actions { gap: .8rem; } body.btf-bjcc-page .cc-card-trail { gap: .5rem; } body.btf-bjcc-page .cc-trail-card { height: 51px; font-size: 1.4rem; } body.btf-bjcc-page .cc-copy-columns, body.btf-bjcc-page .cc-tc-grid { grid-template-columns: 1fr; gap: 1.6rem; } body.btf-bjcc-page .cc-copy-columns { margin-top: 1.8rem; } body.btf-bjcc-page .cc-tc-panel { max-width: 620px; width: 100%; } body.btf-bjcc-page .cc-count-comparison { max-width: 440px; } body.btf-bjcc-page .cc-margin-note { grid-template-columns: 1fr; gap: .55rem; } body.btf-bjcc-page .cc-decision-rows article { grid-template-columns: 1fr; gap: .75rem; } body.btf-bjcc-page .cc-money-story { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 2.1rem; padding-top: 2.1rem; } body.btf-bjcc-page .cc-ev-note { max-width: 480px; width: 100%; } body.btf-bjcc-page .cc-shuffle-list article { grid-template-columns: 28px 1fr; gap: .8rem; } body.btf-bjcc-page .cc-status { grid-column: 2; justify-self: start; margin: 0; font-size: .56rem; } body.btf-bjcc-page .cc-depth { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 1.8rem; } body.btf-bjcc-page .cc-shoe-diagram { max-width: 460px; width: 100%; } body.btf-bjcc-page .btf-bjcc-section.cc-practice-section { padding: 2.7rem 0 2.1rem; } body.btf-bjcc-page .cc-practice-desk { grid-template-columns: 1fr; } body.btf-bjcc-page .cc-practice-left, body.btf-bjcc-page .cc-practice-right { padding: 1.6rem; } body.btf-bjcc-page .cc-practice-left { width: 100%; max-width: 540px; margin: auto; } body.btf-bjcc-page .cc-practice-right { border-left: 0; border-top: 1px solid rgba( 244, 239, 230, .14 ); } body.btf-bjcc-page .cc-practice-stage { gap: 2.5rem; justify-content: center; } body.btf-bjcc-page .cc-practice-answer { flex: 0 1 220px; } body.btf-bjcc-page .cc-practice-key { max-width: 400px; font-size: .75rem; } body.btf-bjcc-page .cc-practice-key b { font-size: .875rem; } body.btf-bjcc-page .cc-recent-cards > .cc-mini-card { width: 48px; height: 67px; } body.btf-bjcc-page .cc-legal-grid { grid-template-columns: 1fr; gap: 1rem; } body.btf-bjcc-page .cc-legal-note { margin: 0; max-width: 560px; } } @media ( max-width: 540px ) { body.btf-bjcc-page .cc-hero-key { padding: 1.25rem; } body.btf-bjcc-page .cc-key-ranks { font-size: .81rem; } body.btf-bjcc-page .cc-key-row small { font-size: .69rem; } body.btf-bjcc-page .cc-key-row { grid-template-columns: 42px 1fr 40px; gap: .95rem; } body.btf-bjcc-page .btf-bjcc-hero .cc-key-row > strong { font-size: 2.3rem; } body.btf-bjcc-page .cc-lesson { padding: 1.2rem; } body.btf-bjcc-page .cc-tool-head { align-items: flex-start; gap: .6rem; } body.btf-bjcc-page .btf-bjcc-section .cc-tool-head h3 { font-size: 1.55rem; } body.btf-bjcc-page .cc-counter { padding-top: .3rem; font-size: .56rem; } body.btf-bjcc-page .cc-lesson-main { grid-template-columns: 1fr; gap: 1.4rem; padding-top: 1.5rem; } body.btf-bjcc-page .cc-count-equation strong { font-size: 2.75rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-lesson-text { font-size: .875rem; min-height: 66px; } body.btf-bjcc-page .cc-tool-actions { gap: .55rem .9rem; } body.btf-bjcc-page .cc-card-trail { grid-template-columns: repeat( 5, 1fr ); gap: .75rem .6rem; } body.btf-bjcc-page .cc-trail-card { height: 52px; font-size: 1.5rem; } body.btf-bjcc-page .cc-lesson-bottom { flex-direction: column; gap: .7rem; } body.btf-bjcc-page .cc-tc-panel { padding: 1.3rem; } body.btf-bjcc-page .cc-tc-fields { gap: .6rem; } body.btf-bjcc-page .btf-bjcc-section .cc-tc-result > strong { font-size: 3.7rem; } body.btf-bjcc-page .cc-formula { font-size: .69rem; gap: .5rem; } body.btf-bjcc-page .btf-bjcc-section .cc-count-comparison strong { font-size: 3.1rem; } body.btf-bjcc-page .cc-shuffle-list article { padding: 1.3rem 0; } body.btf-bjcc-page .cc-practice-left, body.btf-bjcc-page .cc-practice-right { padding: 1.3rem; } body.btf-bjcc-page .cc-practice-stage { gap: 1.55rem; margin-top: 1.8rem; } body.btf-bjcc-page .cc-practice-stage .cc-big-card { width: 99px; height: 140px; } body.btf-bjcc-page .cc-practice-stage .cc-big-card > .cc-pip { font-size: 2.95rem; } body.btf-bjcc-page .btf-bjcc-section .cc-practice-answer > strong { font-size: 3.4rem; } body.btf-bjcc-page .btf-bjcc-section .wrap .cc-practice-answer > p { min-height: 56px; font-size: .69rem; } body.btf-bjcc-page .cc-practice-left .cc-tool-actions { gap: .55rem; } body.btf-bjcc-page .cc-practice-left .cc-btn { padding: .6rem .5rem; font-size: .69rem; } body.btf-bjcc-page .cc-recent-cards > .cc-mini-card { width: 44px; height: 62px; } body.btf-bjcc-page .cc-practice-key { font-size: .63rem; } body.btf-bjcc-page .cc-practice-key b { font-size: .75rem; } body.btf-bjcc-page .cc-legal-note, body.btf-bjcc-page .cc-ev-note { padding: 1.3rem; } body.btf-bjcc-page .cc-margin-note { padding: 1.1rem; } } @media ( max-width: 360px ) { body.btf-bjcc-page .btf-bjcc-hero-cta a { width: 100%; justify-content: center; } body.btf-bjcc-page .cc-hero-key { padding: 1.05rem; } body.btf-bjcc-page .cc-key-row { grid-template-columns: 35px 1fr 30px; gap: .7rem; } body.btf-bjcc-page .cc-hero-key .cc-mini-card { width: 34px; height: 49px; font-size: 1.35rem; } body.btf-bjcc-page .cc-key-ranks { font-size: .69rem; } body.btf-bjcc-page .cc-key-row small { font-size: .56rem; } body.btf-bjcc-page .btf-bjcc-hero .cc-key-row > strong { font-size: 2rem; } body.btf-bjcc-page .cc-lesson { padding: .95rem; } body.btf-bjcc-page .cc-count-equation { gap: .4rem; } body.btf-bjcc-page .cc-count-equation strong { font-size: 2.4rem; } body.btf-bjcc-page .cc-card-trail { gap: .6rem .45rem; } body.btf-bjcc-page .cc-trail-card { height: 48px; } body.btf-bjcc-page .cc-tc-panel { padding: 1.05rem; } body.btf-bjcc-page .cc-tc-fields { grid-template-columns: 1fr; } body.btf-bjcc-page .cc-practice-left, body.btf-bjcc-page .cc-practice-right { padding: 1.05rem; } body.btf-bjcc-page .cc-practice-stage { gap: 1.25rem; } body.btf-bjcc-page .cc-practice-stage .cc-big-card { width: 90px; height: 127px; } body.btf-bjcc-page .btf-bjcc-section .cc-practice-answer > strong { font-size: 2.95rem; } body.btf-bjcc-page .cc-practice-left .cc-btn { font-size: .63rem; } body.btf-bjcc-page .cc-recent-cards { gap: .45rem; } body.btf-bjcc-page .cc-recent-cards > .cc-mini-card { width: 39px; height: 56px; } body.btf-bjcc-page .cc-practice-key { gap: .45rem; font-size: .56rem; } } @media ( pointer: coarse ) { body.btf-bjcc-page .cc-field input[type="number"] { font-size: 16px; } body.btf-bjcc-page .bjcc-faq summary { min-height: 44px; } body.btf-bjcc-page .cc-hero-links { row-gap: 0; } body.btf-bjcc-page .btf-bjcc-hero .wrap .cc-hero-links a:not(.rc-cta):not(.btn-primary):not(.btn-ghost) { display: inline-flex; align-items: center; min-height: 44px; } body.btf-bjcc-page .cc-lesson-bottom a, body.btf-bjcc-page .cc-inline-link { display: inline-flex; align-items: center; min-height: 44px; } } @media ( prefers-reduced-motion: reduce ) { body.btf-bjcc-page .cc-progress-track > span { transition: none; } }