/* Big Card Games — "Club Classic": felt, wood rail, gold trim, Fraunces headings,
   Atkinson Hyperlegible body text (designed for readers with low vision). */
:root {
  color-scheme: light;
  --ink: #1d1a16;
  --muted: #5d574d;
  --cream: #f8f2e4;
  --paper: #fffdf8;
  --line: #e6dcc6;
  --felt: #1c5a3d;
  --felt-2: #0f3a27;
  --felt-hi: #2a7650;
  --night: #0d2a1c;
  --wood: #6e4020;
  --wood-2: #4a2912;
  --gold: #e6b85c;
  --gold-2: #c8943a;
  --gold-ink: #2c1d02;
  --red: #b8202b;
  --link: #1f5f9e;
  --radius: 18px;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --font: "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 19px/1.6 var(--font); }
img, svg { max-width: 100%; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--paper); padding: 8px 12px; z-index: 50; }
.skip:focus { left: 8px; }

/* Felt and wood, shared by the hero, tiles and the game table */
.felt {
  background: var(--noise), radial-gradient(ellipse at 50% 35%, var(--felt-hi) 0%, var(--felt) 45%, var(--felt-2) 100%);
  color: #fff;
}
.rail {
  border-radius: 28px;
  padding: 12px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #8a5429, var(--wood) 40%, var(--wood-2));
  box-shadow: 0 18px 50px rgba(40, 20, 5, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.18);
}
.rail > .felt { border-radius: 18px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25), inset 0 10px 30px rgba(0, 0, 0, 0.35); }

/* Header */
.site-header { background: var(--night); color: var(--cream); border-bottom: 3px solid var(--gold-2); }
.site-header .inner { max-width: 1180px; margin: 0 auto; padding: 0 16px; height: 62px; display: flex; align-items: center; gap: 14px; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; font: 700 22px/1 var(--display); white-space: nowrap; }
.logo em { font-style: normal; color: var(--gold); }
.logo .mark {
  width: 30px; height: 40px; border-radius: 5px; background: var(--paper); display: grid; place-items: center; flex: none;
  box-shadow: 0 0 0 2px var(--gold-2), 0 3px 8px rgba(0, 0, 0, 0.4); transform: rotate(-6deg);
}
.logo .mark svg { width: 20px; height: 20px; fill: #16181b; }
.site-nav { margin-left: auto; display: flex; gap: 4px; }
.site-nav a { color: var(--cream); text-decoration: none; font-weight: 700; font-size: 17px; padding: 9px 12px; border-radius: 10px; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: rgba(230, 184, 92, 0.16); color: var(--gold); }
@media (max-width: 560px) {
  .logo { font-size: 19px; }
  .site-nav a { font-size: 16px; padding: 8px 8px; }
  .site-nav .nav-extra { display: none; }
}
@media (max-width: 420px) {
  .site-header .inner { gap: 8px; padding: 0 12px; }
  .logo { font-size: 17px; gap: 8px; }
  .logo .mark { width: 26px; height: 34px; }
  .logo .mark svg { width: 17px; height: 17px; }
  .site-nav { gap: 0; }
  .site-nav a { font-size: 15px; padding: 8px 7px; }
}
@media (max-width: 340px) {
  .logo span { display: none; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px 26px; border-radius: 14px; border: 0;
  font: 700 19px/1.15 var(--font); text-decoration: none; cursor: pointer;
  background: linear-gradient(180deg, #f3cd78, var(--gold) 55%, #d9a444); color: var(--gold-ink);
  box-shadow: 0 4px 0 #9c6c1c, 0 8px 20px rgba(0, 0, 0, 0.18);
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #9c6c1c; }
.btn.secondary { background: var(--paper); color: var(--ink); box-shadow: none; border: 2px solid var(--line); }
.btn.secondary:hover { border-color: var(--gold-2); }
.btn.ghost { background: transparent; color: #fffaf0; box-shadow: none; border: 2px solid rgba(255, 250, 240, 0.55); }

/* Home: hero */
.hero { max-width: 1180px; margin: 24px auto 0; padding: 0 16px; }
.hero .felt { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 12px; padding: 50px 50px 44px; overflow: hidden; }
.eyebrow {
  display: inline-block; font-weight: 700; font-size: 14px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--gold); border: 1.5px solid rgba(230, 184, 92, 0.6); padding: 5px 12px; border-radius: 999px;
}
.hero h1 { font: 700 clamp(36px, 5.4vw, 60px)/1.05 var(--display); margin: 16px 0 14px; color: #fffaf0; text-wrap: balance; }
.hero p { font-size: 21px; color: rgba(255, 250, 240, 0.9); margin: 0 0 24px; max-width: 30em; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .trust { margin: 18px 0 0; font-size: 17px; color: rgba(255, 250, 240, 0.78); }
.hero-art { position: relative; height: 380px; }
.hero-art .card { position: absolute; left: 52%; top: 12px; --w: 170px; transform-origin: 50% 120%; }
.hero-art .mini-board { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); width: min(360px, 90%); }
@media (max-width: 860px) {
  .hero .felt { grid-template-columns: 1fr; padding: 30px 22px 26px; }
  .hero-art { height: 220px; }
  .hero-art .card { --w: 104px; top: 4px; }
  .hero-art .mini-board { width: 260px; }
}

.mini-board {
  height: 48px; border-radius: 12px; position: relative;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 9px), linear-gradient(180deg, #dcae6f, #b7823f);
  box-shadow: inset 0 0 0 2px rgba(80, 45, 10, 0.35), 0 8px 18px rgba(0, 0, 0, 0.35);
}
.mini-board::before, .mini-board::after {
  content: ""; position: absolute; left: 12px; right: 12px; height: 12px;
  background: radial-gradient(circle, rgba(60, 30, 5, 0.55) 1.8px, transparent 2.4px) 0 0 / 9px 12px;
}
.mini-board::before { top: 8px; }
.mini-board::after { bottom: 8px; }

/* Home: continue banner */
.continue { max-width: 1180px; margin: 20px auto 0; padding: 0 16px; }
.continue .box + .box { margin-top: 10px; }
.continue .box {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px;
  box-shadow: 0 4px 14px rgba(60, 40, 10, 0.06);
}
.continue .pegs { display: flex; gap: 6px; }
.continue .pegs i { width: 14px; height: 14px; border-radius: 50%; display: block; }
.continue b { font-size: 20px; display: block; }
.continue span { color: var(--muted); }
.continue .btn { margin-left: auto; min-height: 50px; padding: 12px 22px; font-size: 18px; }

/* Home: sections and game tiles */
.section { max-width: 1180px; margin: 44px auto 0; padding: 0 16px; }
.section h2 { font: 700 clamp(28px, 4vw, 36px)/1.1 var(--display); margin: 0 0 6px; }
.section .sub { color: var(--muted); margin: 0 0 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.tile {
  background: var(--paper); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(60, 40, 10, 0.08);
  transition: transform 0.15s, box-shadow 0.15s; display: flex; flex-direction: column;
}
.tile:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(60, 40, 10, 0.16); }
.tile .art { height: 180px; position: relative; overflow: hidden; }
.tile .art .card { position: absolute; --w: 84px; }
.tile .art .mini-board { position: absolute; left: 50%; transform: translateX(-50%); bottom: 12px; width: 78%; height: 32px; }
.tile .body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.tile h3 { font: 700 27px/1.1 var(--display); margin: 0 0 6px; }
.tile p { margin: 0 0 16px; color: var(--muted); font-size: 18px; line-height: 1.45; }
.tile .meta { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pill { font-size: 15px; font-weight: 700; padding: 5px 11px; border-radius: 999px; background: #efe6d1; color: #5c4a24; white-space: nowrap; }
.tile .go { font-weight: 700; color: var(--felt); font-size: 19px; white-space: nowrap; }
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); max-width: 900px; }
.tile.wide { grid-column: 1 / -1; flex-direction: row; }
.tile.wide .art { width: 46%; height: auto; min-height: 250px; }
.tile.wide .art .card { --w: 110px; }
.tile.wide .body { padding: 28px 30px; justify-content: center; }
.tile.wide h3 { font-size: 36px; }
@media (max-width: 720px) {
  .tile.wide { flex-direction: column; }
  .tile.wide .art { width: auto; min-height: 200px; }
  .tile.wide .art .card { --w: 92px; }
}

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 18px 0; padding: 0; list-style: none; }
.facts li { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 0; max-width: none; }
.facts b { display: block; font: 700 21px/1.2 var(--display); margin-bottom: 4px; }

/* Content pages */
.content { max-width: 780px; margin: 0 auto; padding: 30px 16px 60px; }
.content h1 { font: 700 clamp(32px, 6vw, 46px)/1.1 var(--display); margin: 8px 0 12px; }
.content h2 { font: 700 clamp(25px, 4.6vw, 32px)/1.2 var(--display); margin: 46px 0 10px; }
.content h3 { font-size: 22px; margin: 28px 0 6px; }
.content p, .content li { max-width: 68ch; }
.content li { margin: 6px 0; }
.content dt { margin-top: 10px; }
.content dd { margin: 0 0 8px 0; }
.lede { font-size: 22px; color: var(--muted); }
.breadcrumb { font-size: 16px; color: var(--muted); margin: 0; }
.breadcrumb a { color: var(--muted); }
.toc { background: var(--paper); border: 1px solid var(--line); border-left: 5px solid var(--gold-2); border-radius: 14px; padding: 14px 22px; font-size: 18px; }
.toc ol { margin: 6px 0; padding-left: 22px; }
.note { background: #fff5dd; border: 1px solid #ecd49a; border-radius: 14px; padding: 14px 18px; }

table.chart { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); font-size: 18px; margin: 12px 0 8px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
table.chart th, table.chart td { border-bottom: 1px solid var(--line); padding: 11px 14px; text-align: left; vertical-align: top; }
table.chart tr:last-child td, table.chart tr:last-child th { border-bottom: 0; }
table.chart th { background: #f3ead6; font-weight: 700; }
table.chart td.pts { font-weight: 700; color: var(--felt); font-size: 20px; min-width: 4.5em; }

@media (max-width: 380px) {
  table.chart { font-size: 16px; }
  table.chart th, table.chart td { padding: 8px 8px; }
  table.chart td.pts { min-width: 0; font-size: 17px; }
}

details.faq { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 12px 18px; margin: 10px 0; }
details.faq summary { font-weight: 700; cursor: pointer; font-size: 19px; }
details.faq p { margin: 10px 0 4px; }

.sv { white-space: nowrap; font-weight: 700; }
.sv.r { color: var(--red); }

/* Footer */
.site-footer { margin-top: 20px; background: var(--night); color: rgba(248, 242, 228, 0.82); font-size: 16px; border-top: 3px solid var(--gold-2); }
.site-footer .inner { max-width: 1180px; margin: 0 auto; padding: 24px 16px 34px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.site-footer a { color: rgba(248, 242, 228, 0.9); }
.site-footer .copy { margin-left: auto; }

/* Hand counter (scoring page) */
.counter { --cw: 72px; --ow: 40px; --pw: clamp(58px, 15vw, 84px); margin-top: 40px; }
.ct-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 16px 10px 12px; border-radius: 16px; }
.ct-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; font-size: 14px; font-weight: 700; }
.ct-suits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0 8px; }
.ct-suit, .ct-rank { border: 2px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; font-family: var(--font); color: var(--ink); }
.ct-suit { min-height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 15px; }
.ct-suit svg { width: 26px; height: 26px; fill: currentColor; }
.ct-suit[aria-pressed="true"] { border-color: var(--gold-2); background: #fbf0d6; box-shadow: inset 0 0 0 1px var(--gold-2); }
.ct-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.ct-rank { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 700; font-size: 22px; }
.ct-rank svg { width: 18px; height: 18px; fill: currentColor; }
.ct-rank:disabled { opacity: 0.35; cursor: default; }
.s-H.ct-suit, .s-D.ct-suit, .s-H.ct-rank, .s-D.ct-rank { color: var(--red); }
.ct-result { margin-top: 16px; min-height: 60px; }
.ct-need { font-size: 19px; color: var(--muted); }
.ct-total { font: 700 34px/1.1 var(--display); color: var(--felt); margin: 0 0 6px; }
.ct-cards { color: var(--muted); font-size: 17px; }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-items { list-style: none; margin: 0 0 12px; padding: 0; font-size: 19px; }
.dlg-items li { padding: 9px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; max-width: none; }
.dlg-spoken { font-family: var(--display); font-style: italic; font-size: 20px; color: #3b3a36; }

@media print {
  .site-header, .site-footer, .no-print, .tool { display: none !important; }
  body { background: #fff; font-size: 13pt; }
  .content { max-width: none; padding: 0; }
  table.chart { font-size: 12pt; }
}