/* Table Ready — layout: felt header band over printed-ivory reading pages; charts and drills sit on felt insets. Single deliberate look. */
:root{
  color-scheme: light;
  --paper:#f5efe1; --paper-2:#ece3cf; --card:#fffaf0; --ink:#1d1b17; --ink-2:#4d473b; --rule:rgba(29,27,23,.16);
  --felt:#0e3b2f; --felt-2:#155040; --felt-deep:#082219; --brass:#d9ae57; --brass-ink:#8a6420; --ox:#9e3a2f;
  --c-h:#a9c0d6; --c-s:#d4776a; --c-d:#86b87c; --c-ds:#b9d9a4; --c-p:#e8c35e; --c-r:#b79bd4;
  --f-display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--f-body); font-size:16px; line-height:1.6; color:var(--ink); background:var(--paper)}
body.felt-page{background:var(--felt-deep)}
a{color:var(--felt-2); text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--ox)}
:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* Site header */
.site-head{background:var(--felt-deep); color:#f4eddc; border-bottom:1px solid rgba(217,174,87,.3)}
.site-head .in{max-width:1080px; margin:0 auto; padding-inline:16px; padding-block:12px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px}
.logo{display:inline-flex; align-items:baseline; gap:8px; color:#f4eddc; text-decoration:none; font:italic 700 24px/1 var(--f-display)}
.logo span{color:var(--brass); font-style:normal; font-size:18px}
.logo:hover{color:#fff}
.site-nav{display:flex; flex-wrap:wrap; gap:2px}
.site-nav a{color:rgba(244,237,220,.78); text-decoration:none; font:700 12px/1 var(--f-body); letter-spacing:.1em; text-transform:uppercase; padding:9px 10px; border-radius:8px}
.site-nav a:hover{color:#fff; background:rgba(255,255,255,.06)}
.site-nav a[aria-current="page"]{color:var(--brass)}

/* Page shell */
.page{max-width:1080px; margin:0 auto; padding-inline:16px; padding-block:24px 56px}
.crumbs{font:600 12px var(--f-body); letter-spacing:.06em; color:var(--ink-2); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--ink-2)}
.crumbs span[aria-hidden]{opacity:.5}
.eyebrow{font:800 11px/1 var(--f-body); letter-spacing:.2em; text-transform:uppercase; color:var(--brass-ink); margin:0 0 12px}
h1,h2,h3{font-family:var(--f-display); font-weight:700; text-wrap:balance; line-height:1.1; margin:0}
h1{font-size:clamp(34px,6vw,54px); letter-spacing:-.01em}
h2{font-size:clamp(24px,3.6vw,30px); margin-bottom:14px}
h3{font-size:20px; margin-bottom:8px}
.prose{max-width:66ch}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px; padding-left:20px}
.prose li{margin-bottom:6px}
.lede{font-size:18px; color:var(--ink-2); max-width:62ch; margin:14px 0 0}
section.block{margin-top:44px}
.meta-line{font:500 12.5px var(--f-mono); color:var(--ink-2); margin-top:14px}

/* Hand hero */
.hero{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:28px; align-items:center}
@media (max-width:820px){ .hero{grid-template-columns:minmax(0,1fr)} }
.verdict{margin-top:22px; display:flex; align-items:center; gap:16px; padding:18px 20px; border-radius:16px; background:var(--card); border:1px solid var(--rule); box-shadow:0 18px 40px -28px rgba(29,27,23,.5)}
.verdict .chip{flex:none; width:58px; height:58px; border-radius:50%; --c:#5d86ad;
  background:radial-gradient(circle,var(--card) 0 42%,transparent 43%),repeating-conic-gradient(var(--c) 0 20deg,var(--card) 20deg 30deg);
  box-shadow:0 0 0 2px rgba(0,0,0,.15),0 6px 12px -6px rgba(0,0,0,.5); animation:spin-in .9s cubic-bezier(.2,.9,.25,1) both}
@keyframes spin-in{from{transform:rotate(-240deg) scale(.4); opacity:0}}
.verdict .chip.a-stand{--c:var(--ox)} .verdict .chip.a-double{--c:#4f8c4a} .verdict .chip.a-split{--c:#c79a2a} .verdict .chip.a-surrender{--c:#7f5ea8}
.verdict p{margin:0; font:italic 600 clamp(19px,2.6vw,23px)/1.3 var(--f-display)}
.verdict small{display:block; font:700 10.5px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:8px; font-style:normal}

.felt-inset{position:relative; border-radius:22px 22px 120px 120px / 22px 22px 70px 70px; padding:22px 18px 30px; color:#f4eddc;
  background:radial-gradient(90% 80% at 50% 25%, var(--felt-2), var(--felt) 60%, var(--felt-deep));
  box-shadow:inset 0 0 0 5px rgba(0,0,0,.18), inset 0 0 0 6px rgba(217,174,87,.35), 0 26px 50px -30px rgba(0,0,0,.7); overflow:hidden}
.felt-inset .lab{display:block; text-align:center; font:700 10px/1 var(--f-body); letter-spacing:.22em; text-transform:uppercase; color:rgba(244,237,220,.6); margin:0 0 10px}
.felt-inset .arc{display:block; text-align:center; font:700 10px/1 var(--f-body); letter-spacing:.26em; color:var(--brass); margin:18px 0}
.cards{display:flex; justify-content:center}
.cards .card + .card{margin-left:-22px}
.card{width:80px; height:114px; border-radius:9px; position:relative; flex:none; color:var(--ink); font-family:var(--f-display);
  background:linear-gradient(160deg,#fffaf0,#f4eddc 60%,#e8dfc8); box-shadow:0 10px 20px -8px rgba(0,0,0,.6),0 2px 4px rgba(0,0,0,.3);
  animation:deal .6s cubic-bezier(.2,.9,.25,1.05) both; animation-delay:var(--d,0ms)}
@keyframes deal{from{opacity:0; transform:translate(120px,-160px) rotate(24deg)}}
.card.red{color:#b0322a}
.card .tl,.card .br{position:absolute; font-weight:700; font-size:18px; line-height:.92; text-align:center}
.card .tl{top:7px; left:8px} .card .br{bottom:7px; right:8px; transform:rotate(180deg)}
.card .tl i,.card .br i{display:block; font-style:normal; font-size:13px}
.card .pip{position:absolute; inset:0; display:grid; place-items:center; font-size:38px}
.card .pip.face{font:italic 700 42px var(--f-display)}
.card.back{background:repeating-linear-gradient(45deg,rgba(217,174,87,.55) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(217,174,87,.55) 0 2px,transparent 2px 9px),#6e1f1a; border:5px solid #f4eddc}
.total{display:block; text-align:center; margin-top:10px; font:italic 700 18px var(--f-display)}

/* Data tables */
.tbl-wrap{overflow-x:auto; border:1px solid var(--rule); border-radius:14px; background:var(--card)}
table.data{border-collapse:collapse; width:100%; min-width:460px; font-size:14.5px}
table.data th,table.data td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--rule)}
table.data tr:last-child th,table.data tr:last-child td{border-bottom:0}
table.data thead th{font:800 10.5px/1.2 var(--f-body); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); background:var(--paper-2)}
table.data td.num{font:600 14px var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
table.data thead th.num{text-align:right}
table.data tr.best-row th{font-weight:800}
.tag{display:inline-block; font:800 9.5px/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; padding:4px 7px; border-radius:999px; margin-left:8px; vertical-align:2px}
.tag.best{background:var(--felt); color:var(--brass)}
.tag.close{background:var(--paper-2); color:var(--brass-ink); border:1px solid rgba(138,100,32,.35)}
.tag.here{background:var(--ox); color:#fff}
td.best{background:rgba(134,184,124,.22)}
.note{font-size:13.5px; color:var(--ink-2); margin-top:10px; max-width:70ch}

.act{display:inline-flex; align-items:center; gap:8px; font-weight:700}
.act::before{content:""; width:12px; height:12px; border-radius:3px; background:var(--c-h)}
.act.a-S::before{background:var(--c-s)} .act.a-D::before{background:var(--c-d)} .act.a-Ds::before{background:var(--c-ds)} .act.a-P::before{background:var(--c-p)} .act.a-R::before{background:var(--c-r)}

/* Callouts */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px}
.callout{border-radius:16px; padding:18px 20px; background:var(--card); border:1px solid var(--rule)}
.callout h3{font-size:19px}
.callout p{margin:0; color:var(--ink-2)}
.callout.warn{background:#f6e3dc; border-color:rgba(158,58,47,.3)}
.callout.warn h3{color:var(--ox)}

/* FAQ */
.faq details{border-bottom:1px solid var(--rule); padding:14px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font:400 22px/1 var(--f-mono); color:var(--brass-ink); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:10px 0 0; color:var(--ink-2); max-width:66ch}

/* Hand tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); gap:12px}
.tile{display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:14px; background:var(--card); border:1px solid var(--rule); text-decoration:none; color:var(--ink); transition:transform .2s cubic-bezier(.2,.9,.3,1), box-shadow .2s, border-color .2s}
.tile:hover{transform:translateY(-3px); box-shadow:0 14px 28px -18px rgba(29,27,23,.6); border-color:var(--brass-ink); color:var(--ink)}
.tile b{font:italic 700 20px/1.15 var(--f-display)}
.tile span{font-size:13.5px; color:var(--ink-2)}

/* Drill */
.drill{border-radius:18px; background:var(--felt); color:#f4eddc; padding:16px; box-shadow:0 22px 44px -28px rgba(0,0,0,.7)}
.dr-top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.dr-score{font:700 14px var(--f-mono); color:var(--brass)}
.dr-rules{display:flex; gap:6px; flex-wrap:wrap}
.dr-tog{appearance:none; border:1px solid rgba(217,174,87,.4); background:rgba(0,0,0,.2); color:#f4eddc; border-radius:999px; padding:6px 11px; font:600 12px var(--f-body); cursor:pointer}
.dr-tog:hover{border-color:var(--brass)}
.dr-felt{display:flex; flex-direction:column; gap:10px; padding:14px; border-radius:14px; background:rgba(0,0,0,.18)}
.dr-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.dr-lab{width:54px; font:700 10px var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:rgba(244,237,220,.6)}
.dr-name{font:italic 700 18px var(--f-display); margin-left:6px}
.pc{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:44px; height:62px; border-radius:6px; background:#fbf6ea; color:var(--ink); margin-right:-8px; box-shadow:0 4px 10px -4px rgba(0,0,0,.6); font-family:var(--f-display); line-height:1}
.pc b{font-size:19px} .pc i{font-style:normal; font-size:15px}
.pc.red{color:#b0322a}
.pc.back{background:repeating-linear-gradient(45deg,rgba(217,174,87,.55) 0 2px,transparent 2px 7px),#6e1f1a; border:3px solid #fbf6ea}
.drill.dealt .pc{animation:deal .5s cubic-bezier(.2,.9,.25,1.05) both}
.drill.dealt .pc:nth-child(2){animation-delay:.08s}
.dr-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.dr-b{appearance:none; border:0; border-radius:10px; padding:11px 16px; font:800 13px var(--f-body); letter-spacing:.04em; cursor:pointer; color:var(--ink); background:#f4eddc; transition:transform .15s, box-shadow .2s, opacity .2s}
.dr-b:hover{transform:translateY(-2px)}
.dr-b.right{box-shadow:0 0 0 3px var(--brass),0 0 20px rgba(217,174,87,.6)}
.dr-b.wrong{opacity:.5; animation:shake .4s}
@keyframes shake{25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.dr-out{min-height:20px; margin-top:12px}
.dr-out p{margin:0 0 10px; font-size:14.5px}
.dr-out p.yes strong{color:var(--brass)} .dr-out p.no strong{color:#f3b2a6}
.dr-out a{color:var(--brass)}
.dr-next{appearance:none; border:1px solid var(--brass); background:var(--brass); color:var(--ink); border-radius:10px; padding:9px 14px; font:800 12px var(--f-body); letter-spacing:.08em; text-transform:uppercase; cursor:pointer}

/* Strategy chart */
.chart-sheet{background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:18px; box-shadow:0 24px 50px -36px rgba(29,27,23,.6)}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:13px; color:var(--ink-2); margin-bottom:14px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:24px; height:18px; border-radius:4px; display:inline-grid; place-items:center; font:700 9.5px var(--f-mono); font-style:normal; color:var(--ink)}
.grids{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:20px}
.gridwrap{overflow-x:auto; min-width:0}
.gridwrap h3{font:800 11px/1 var(--f-body); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); margin:0 0 8px}
table.sc{border-collapse:separate; border-spacing:2px; width:100%; min-width:310px; font:700 11.5px var(--f-mono)}
table.sc th{font:700 11.5px var(--f-mono); color:var(--ink-2); padding:4px 2px; text-align:center}
table.sc tbody th{text-align:right; padding-right:6px; white-space:nowrap; color:var(--ink)}
table.sc td{text-align:center; border-radius:4px; height:28px; padding:0; position:relative; cursor:pointer; transition:transform .15s, box-shadow .15s}
table.sc td:hover{transform:scale(1.16); z-index:2; box-shadow:0 4px 10px rgba(0,0,0,.25)}
table.sc td a{color:inherit; text-decoration:none; display:block; line-height:28px}
table.sc td.has-page::after{content:""; position:absolute; top:3px; right:3px; width:5px; height:5px; border-radius:50%; background:var(--ink); opacity:.55}
table.sc td.changed{box-shadow:inset 0 0 0 2px var(--ink)}
table.sc td.sel{box-shadow:0 0 0 2px var(--ink); transform:scale(1.14); z-index:3}
.k-H{background:var(--c-h)}.k-S{background:var(--c-s)}.k-D{background:var(--c-d)}.k-Ds{background:var(--c-ds)}.k-P{background:var(--c-p)}.k-R{background:var(--c-r)}
.chart-sheet.enter td{animation:cell .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes cell{from{opacity:0; transform:scale(.4)}}
.cellinfo{margin-top:16px; padding:14px 16px; border-radius:12px; background:var(--felt-deep); color:#f4eddc; min-height:66px}
.cellinfo b{font:italic 700 19px var(--f-display); color:var(--brass)}
.cellinfo p{margin:4px 0 0; color:rgba(244,237,220,.8); font-size:14px}
.cellinfo a{color:var(--brass)}
.controls{display:flex; flex-wrap:wrap; gap:12px 18px; margin:20px 0}
.seg{display:flex; flex-direction:column; gap:6px}
.seg > span{font:800 10.5px/1 var(--f-body); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2)}
.seg div{display:inline-flex; padding:3px; border-radius:11px; background:var(--paper-2); border:1px solid var(--rule)}
.seg button{appearance:none; border:0; background:transparent; padding:8px 13px; border-radius:8px; font:700 13px var(--f-body); color:var(--ink-2); cursor:pointer; transition:background .2s,color .2s}
.seg button[aria-pressed="true"]{background:var(--felt); color:#f4eddc}
.presets{display:flex; flex-wrap:wrap; gap:8px}
.presets a{display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid var(--rule); background:var(--card); text-decoration:none; color:var(--ink); font:600 13px var(--f-body)}
.presets a:hover,.presets a[aria-current="page"]{border-color:var(--felt); background:var(--felt); color:#f4eddc}
.difflist{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); gap:8px; padding:0; list-style:none; margin:0}
.difflist li{padding:10px 12px; border-radius:10px; background:var(--card); border:1px solid var(--rule); font-size:14px}
.difflist li b{font-family:var(--f-mono); font-size:13px}

.cta{display:inline-flex; align-items:center; gap:10px; padding:13px 20px; border-radius:12px; background:var(--felt); color:#f4eddc; text-decoration:none; font:800 13px var(--f-body); letter-spacing:.08em; text-transform:uppercase; transition:transform .15s, background .2s}
.cta:hover{background:var(--felt-2); color:#fff; transform:translateY(-2px)}
.cta span{color:var(--brass)}

/* Casino page */
.status{display:inline-flex; align-items:center; gap:8px; font:700 12px var(--f-body); padding:6px 10px; border-radius:999px; background:#f3e6c4; color:var(--brass-ink); border:1px solid rgba(138,100,32,.3)}
.status::before{content:""; width:8px; height:8px; border-radius:50%; background:#c79a2a}
.src{font:500 12px var(--f-mono); color:var(--ink-2)}
.checklist{list-style:none; padding:0; margin:0; display:grid; gap:10px}
.checklist li{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; background:var(--card); border:1px solid var(--rule); border-radius:12px}
.checklist li::before{content:"\2660"; color:var(--felt-2); flex:none; margin-top:1px}

/* Footer */
.site-foot{background:var(--felt-deep); color:rgba(244,237,220,.75); font-size:13.5px}
.site-foot .in{max-width:1080px; margin:0 auto; padding-inline:16px; padding-block:30px 40px; display:grid; gap:16px}
.site-foot a{color:#f4eddc}
.site-foot .rg{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.site-foot .rg strong{font:800 12px var(--f-body); letter-spacing:.12em; padding:5px 9px; border:1px solid rgba(217,174,87,.5); border-radius:6px; color:var(--brass)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:6px 18px}
.site-foot p{margin:0; max-width:80ch}

@media (max-width:480px){
  .card{width:66px; height:94px}.card .pip{font-size:30px}.card .pip.face{font-size:34px}.card .tl,.card .br{font-size:15px}
  .verdict{padding:14px}.verdict .chip{width:46px; height:46px}
  .site-nav a{padding:8px 7px; letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important; animation-delay:0ms!important; transition-duration:.01ms!important}}