/* =========================================================================
   Card Sunday design system
   Calm, readable, trustworthy: warm paper, deep felt green, a touch of gold.
   ========================================================================= */
/* Self-hosted fonts (SIL Open Font License, see /static/fonts/LICENSE-*.txt).
   Atkinson Hyperlegible Next (Braille Institute, 2025) was designed for readers with low vision;
   one variable file holds every weight from 200 to 800. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-700-normal.woff2") format("woff2"); font-weight: 600 800; font-style: normal; font-display: swap; }
:root {
  /* Colors */
  --bg: #f7f3ea;            /* warm paper */
  --surface: #fffdf8;
  --surface-2: #f1ebdd;
  --fg: #1f2421;
  --muted: #565b55;
  --line: #e2dacb;
  --felt: #1e5a3c;
  --felt-dark: #143f2a;
  --felt-light: #2f7d55;
  --gold: #c9a227;
  --gold-soft: #f3e3a6;
  --gold-ink: #7a5f0e;
  --red: #b3261e;
  --ink: #143f2a;           /* headings, links, accents on paper */
  --ink-2: #1e5a3c;
  --hover-tint: #eef5f0;
  --won-bg: #e4f1e8;
  --won-line: #9fc9ad;
  --ad-a: #efe9dc;
  --ad-b: #f4efe4;
  --frame-edge: transparent; /* dark theme: a light edge so the felt and bar stand off the page */
  color-scheme: light;
  --focus: #1a5fb4;
  /* Type */
  --font: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Lora", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  /* Shape */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-1: 0 1px 2px rgba(31, 36, 33, 0.06), 0 2px 8px rgba(31, 36, 33, 0.06);
  --shadow-2: 0 4px 12px rgba(31, 36, 33, 0.10), 0 12px 32px rgba(31, 36, 33, 0.10);
  --felt-texture: radial-gradient(ellipse at 50% 35%, var(--felt-light) 0%, var(--felt) 55%, var(--felt-dark) 100%);
  font-size: 18px; /* larger base size for an older audience */
}
/* Large print: bigger text, stronger contrast. The game engine also reads this attribute. */
:root[data-large-print] { font-size: 22px; --muted: #3a3e39; --line: #b9b2a2; }

/* Dark theme: chosen in Settings, or following the device when set to "Match my device". */
:root[data-theme="dark"] {
  --bg: #151b18; --surface: #1e2622; --surface-2: #27302b; --fg: #ece6d8; --muted: #b5baae;
  --line: #3a453f; --ink: #b9e0c6; --ink-2: #9fd2b1; --gold-ink: #f0d77f; --gold-soft: #4a4022;
  --red: #ff8a80; --focus: #8ab4ff; --hover-tint: #26342c; --won-bg: #213a2b; --won-line: #3f7a55;
  --ad-a: #1b221e; --ad-b: #202823; --frame-edge: rgba(243, 227, 166, 0.22);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  --bg: #151b18; --surface: #1e2622; --surface-2: #27302b; --fg: #ece6d8; --muted: #b5baae;
  --line: #3a453f; --ink: #b9e0c6; --ink-2: #9fd2b1; --gold-ink: #f0d77f; --gold-soft: #4a4022;
  --red: #ff8a80; --focus: #8ab4ff; --hover-tint: #26342c; --won-bg: #213a2b; --won-line: #3f7a55;
  --ad-a: #1b221e; --ad-b: #202823; --frame-edge: rgba(243, 227, 166, 0.22);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
  }
}
:root[data-theme="dark"] .btn-game:not(.btn-game--primary):not(.btn-game--gold) { border-color: var(--felt-light); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn-game:not(.btn-game--primary):not(.btn-game--gold) { border-color: var(--felt-light); }
}
:root[data-theme="dark"][data-large-print] { --muted: #d0d4ca; --line: #56625b; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); line-height: 1.6; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-underline-offset: 0.15em; }
a:hover { color: var(--ink-2); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.6rem); margin: 0.5em 0 0.3em; }
h2 { font-size: 1.45rem; margin: 1.7em 0 0.6em; }
h3 { font-size: 1.15rem; margin: 1.2em 0 0.4em; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 46em; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.logo:hover { color: #fff; }
.logo__mark { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.01em; }
.logo--dark { color: var(--ink); }
.logo--dark:hover { color: var(--ink); }

/* ---------- Header ---------- */
.site-header { background: var(--felt-texture); color: #fff; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding-top: 12px; padding-bottom: 12px; }
.site-nav { display: flex; gap: 20px; }
.site-nav a { color: rgba(255, 255, 255, 0.92); text-decoration: none; padding: 10px 2px 2px; border-bottom: 2px solid transparent; font-weight: 500; } /* text on the logo name's baseline */
.site-nav a[aria-current="page"], .site-nav a:hover { color: #fff; border-bottom-color: var(--gold); }
.site-nav__icon { display: none; width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-tools { margin-left: auto; display: flex; gap: 8px; align-items: center; position: relative; }

.btn { font: inherit; font-size: 0.9rem; font-weight: 600; min-height: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer;
  list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { background: rgba(255, 255, 255, 0.14); }
.btn::-webkit-details-marker { display: none; }
.btn__icon { font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; line-height: 1; } /* no taller than the other buttons */
.btn__icon span { font-size: 1.1rem; }
.btn--toggle[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.btn__icon--gear { font-family: var(--font); font-size: 1.35rem; line-height: 1; display: none; }
.settings { position: relative; }
/* Phones: logo and icon buttons share one row; the menu sits in a slim darker strip below,
   with "All games" as a rounded button that matches the round buttons above it. */
@media (max-width: 600px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding-top: 6px; padding-bottom: 0; }
  .site-nav { grid-column: 1 / -1; grid-row: 2; gap: 8px; font-size: 0.92rem; margin: 4px -16px 0; padding: 0 16px 4px;
    background: rgba(0, 0, 0, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }
  .site-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); font-weight: 600; }
  .site-nav a[aria-current="page"], .site-nav a:hover { border-color: var(--gold); background: rgba(201, 162, 39, 0.16); }
  .site-nav__icon { display: block; }
  .site-tools { grid-column: 2; grid-row: 1; }
  .btn { width: 44px; height: 44px; min-width: 0; padding: 0; justify-content: center; } /* equal circles */
  .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn__icon--gear { display: inline; }
  .logo__mark { width: 32px; height: 32px; }
  .logo__word { font-size: 1.2rem; }
}
.settings__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 250px; background: var(--surface); color: var(--fg);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow-2); }
.settings fieldset { border: 0; margin: 0; padding: 0; }
.settings legend { font-weight: 600; margin-bottom: 6px; }
.settings label { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
/* Checkboxes and radios big enough to see and hit (their labels are the full tap area). */
input[type="radio"], input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--felt); flex: none; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 64px; padding: 32px 0 16px; background: var(--surface-2); border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 28px 56px; }
.site-footer__brand { flex: 1 1 280px; }
.site-footer__brand p { margin: 8px 0 0; max-width: 28em; }
.page-text { max-width: 46rem; }
.page-text h2 { margin-top: 1.8em; }
.page-text li { margin-bottom: 8px; }
.contact-card { display: flex; flex-direction: column; gap: 4px; margin: 24px 0; padding: 20px 24px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-card__label { color: var(--muted); font-size: 0.95rem; }
.contact-card__email { font-size: clamp(1.05rem, 5.4vw, 1.35rem); font-weight: 700; overflow-wrap: anywhere; } /* one line on small phones */
@media (max-width: 400px) { .contact-card { padding: 16px 18px; } }
.nowrap { white-space: nowrap; } /* keeps a short phrase on one line, no lone last word */
.site-footer__title { margin: 6px 0 10px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 32px; }
.site-footer__list--two { grid-template-columns: repeat(2, auto); }
.site-footer__list a, .site-footer__more a { display: inline-block; padding: 5px 0; }
.site-footer__more { margin: 6px 0 0; font-weight: 600; }
@media (max-width: 600px) {
  .site-footer__nav { flex: 1 1 100%; }
  .site-footer__list--two { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .site-footer__list a, .site-footer__more a { padding: 10px 0; } /* 44px tap targets */
}
@media (max-width: 359px) { .site-footer__list--two { grid-template-columns: 1fr; } } /* long names would wrap */
.site-footer__copy { margin: 20px 0 0; }

/* ---------- Breadcrumbs, chips, buttons ---------- */
.breadcrumbs { margin-top: 18px; font-size: 0.88rem; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.tag { display: inline-flex; align-items: center; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.tag--soon { background: var(--gold-soft); border-color: #e4cf86; color: var(--gold-ink); }
.btn-game { font: inherit; font-size: 0.95rem; font-weight: 600; min-height: 46px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--felt); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; text-decoration: none; transition: background 0.15s, transform 0.05s; }
.btn-game:hover { background: var(--hover-tint); color: var(--ink); }
.btn-game:active { transform: translateY(1px); }
.btn-game--primary { background: var(--felt); color: #fff; box-shadow: 0 2px 0 var(--felt-dark); }
.btn-game--primary:hover { background: var(--felt-light); color: #fff; }
.btn-game--gold { background: var(--gold); border-color: var(--gold); color: #1f2421; box-shadow: 0 2px 0 #a58219; }
.btn-game--gold:hover { background: #d8b23a; color: #1f2421; }
.btn-game:disabled { opacity: 0.45; cursor: default; }
.btn-game--toggle[aria-pressed="true"] { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
@keyframes ct-hint { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); } 50% { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.9); } }
.btn-game.is-hinted { animation: ct-hint 0.5s ease-in-out 3; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }

/* ---------- Home ---------- */
.hero { display: grid; gap: 24px; align-items: center; padding: 28px 0 8px; }
@media (min-width: 860px) { .hero { grid-template-columns: 1.15fr 1fr; padding-top: 40px; } }
.hero h1 { margin-top: 0; }
.hero__points { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.hero__points li::before { content: "✓"; color: var(--ink-2); margin-right: 6px; }
.hero__art { position: relative; height: 260px; border-radius: 22px; background: var(--felt-texture); box-shadow: var(--shadow-2), inset 0 0 0 6px rgba(255, 255, 255, 0.06); overflow: hidden; }
.hero__fan { position: absolute; left: 50%; bottom: -30px; width: 0; height: 0; }
.hero__fan img, .mini-fan img { max-width: none; }
.hero__fan img { position: absolute; width: 118px; left: -59px; bottom: 0; transform-origin: 50% 120%; border-radius: 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); }
@media (max-width: 520px) { .hero__art { height: 200px; } .hero__fan img { width: 92px; left: -46px; } }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.section-head h2 { margin-bottom: 0.4em; }

/* ---------- Game grid and cards ---------- */
.game-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.game-card__link { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--fg); overflow: hidden; box-shadow: var(--shadow-1); transition: transform 0.15s, box-shadow 0.15s; }
.game-card__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); color: var(--fg); }
.game-card__art { position: relative; height: 128px; background: var(--felt-texture); overflow: hidden; }
.game-card__art .mini-fan { position: absolute; left: 50%; bottom: -16px; }
.mini-fan img { position: absolute; width: 68px; left: -34px; bottom: 0; transform-origin: 50% 160%; border-radius: 5px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3); }
.mini-fan img:nth-child(1) { transform: rotate(-14deg); }
.mini-fan img:nth-child(2) { transform: rotate(0deg); }
.mini-fan img:nth-child(3) { transform: rotate(14deg); }
.game-card__link:hover .mini-fan img:nth-child(1) { transform: rotate(-19deg); }
.game-card__link:hover .mini-fan img:nth-child(3) { transform: rotate(19deg); }
.mini-fan img { transition: transform 0.2s; }
.game-card__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.game-card__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--ink); }
.game-card__alt { font-size: 0.85rem; color: var(--muted); }
.game-card__meta { font-size: 0.88rem; color: var(--muted); }
.game-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 10px; }
.game-card__play { flex-basis: 100%; margin-top: 6px; padding: 8px 12px; border-radius: 999px; text-align: center; font-weight: 600;
  font-size: 0.95rem; background: var(--felt); color: #fff; transition: background 0.15s; }
.game-card__link:hover .game-card__play { background: var(--felt-light); }

.continue { background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius); padding: 6px 18px 12px; margin-top: 20px; box-shadow: var(--shadow-1); }
.continue h2 { margin-top: 0.6em; font-size: 1.15rem; }
.continue__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.continue__list a { display: inline-flex; padding: 8px 16px; border-radius: 999px; background: var(--felt); color: #fff; text-decoration: none; font-weight: 600; }

.features { margin-top: 24px; }
/* Four features: 4 across, 2x2 on tablets, one column on phones (never 3 + 1). */
.feature-list { list-style: none; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-list { grid-template-columns: 1fr; } }
.feature-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1); }
.feature-list strong { display: block; font-family: var(--font-display); color: var(--ink); font-size: 1.08rem; margin-bottom: 4px; }
/* Line icons (inline SVG) take the text colour and scale with the font size. */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.feature-list .feature-icon { display: block; margin-bottom: 6px; color: var(--ink-2); }
.feature-list .feature-icon .icon { width: 28px; height: 28px; stroke-width: 1.8; }

/* ---------- Game page ---------- */
.game-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.game-head h1 { margin-bottom: 0.1em; }
.game-head__alt { margin: 0 0 10px; }
.game-head__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.game-layout { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .game-layout { grid-template-columns: minmax(0, 1fr) 300px; } }
.game-layout__side { display: none; }
@media (min-width: 1024px) { .game-layout__side { display: block; } }

.table-frame { position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--felt-texture); border-radius: 20px; overflow: hidden;
  box-shadow: 0 0 0 1px var(--frame-edge), var(--shadow-2), inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 60px rgba(0, 0, 0, 0.25); }
.table-frame canvas { display: block; }
.table-frame canvas:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
@media (max-width: 599px) { .table-frame--live { aspect-ratio: 3 / 4; } }
.table-frame__soon { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 24px; }
.table-frame__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.table-frame__loading { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.9); font-family: var(--font-display); font-size: 1.2rem; }
.table-frame--live.is-ready .table-frame__loading { display: none; }

.game-info { margin: 0 0 10px; padding: 9px 16px; border-radius: 12px; background: var(--felt-dark); color: #fff; font-weight: 600; font-size: 0.95rem;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.game-info[hidden] { display: none; }
.game-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.game-actions .btn-game { padding-inline: 14px; } /* eight bids (Oh Hell) fit one row on a laptop screen */
.game-actions[hidden] { display: none; }
.game-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.game-status { margin: 0; font-weight: 600; min-height: 1.5em; flex: 1 1 18em; }
.game-toolbar__buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.game-help { margin: 8px 2px 0; }
.game-stats { margin: 8px 2px 0; font-size: 0.9rem; color: var(--muted); }
.game-dialog { border: 0; border-radius: 18px; padding: 28px; max-width: min(92vw, 440px); box-shadow: var(--shadow-2); background: var(--surface); color: var(--fg);
  border-top: 6px solid var(--gold); }
.game-dialog::backdrop { background: rgba(20, 30, 24, 0.55); }
.game-dialog h2 { margin-top: 0; }
.game-dialog__actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* Key facts: a 2x2 grid of cards (wide enough for sentences like "You and a computer partner
   vs 2 computer players"); on phones one list, each label above its value. */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.facts > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.facts dt { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
.facts dt svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.facts dd { margin: 6px 0 0; font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
@media (max-width: 600px) {
  .facts { grid-template-columns: 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .facts > div { border: 0; border-radius: 0; padding: 12px 14px; }
  .facts > div + div { border-top: 1px solid var(--line); }
  .facts dd { margin-top: 4px; }
}
.howto { padding-left: 1.3em; }
.howto li { margin-bottom: 8px; padding-left: 4px; }
.howto li::marker { color: var(--ink-2); font-weight: 700; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 12px 0; } /* 44px+ tap target */
.faq p { margin: 0 0 14px; }

/* ---------- Ad slots: fixed reserved sizes so the layout never shifts ---------- */
.ad-slot { position: relative; margin: 24px auto; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--ad-a), var(--ad-a) 10px, var(--ad-b) 10px, var(--ad-b) 20px); border: 1px dashed var(--line); border-radius: 8px; }
.ad-slot__label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ad-slot--leaderboard { width: 100%; max-width: 728px; height: 90px; }
@media (max-width: 767px) { .ad-slot--leaderboard { max-width: 320px; height: 50px; } }
.ad-slot--sidebar { width: 300px; height: 600px; margin-top: 0; position: sticky; top: 16px; }

/* ---------- Rules pages ---------- */
.rules h2 { margin-top: 1.8em; }
.byline { margin-top: -0.3em; }
.byline a { color: inherit; }
.more-games { margin: 18px 0 0; }
.more-games__label { font-weight: 700; }
.rules-index { margin-top: 2.5em; }
.rules-index__groups { display: grid; gap: 4px 28px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rules-index ul { list-style: none; padding: 0; margin: 0; }
.rules-index li { margin-bottom: 8px; }
.rules li { margin-bottom: 6px; }
.rules-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.rules-table th, .rules-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.rules-table tr:last-child td { border-bottom: 0; }
.rules-table thead th { background: var(--surface-2); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }

/* ---------- Printable score sheet ---------- */
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-top: 16px; }
.sheet__title { margin-top: 0; }
.sheet__table { width: 100%; border-collapse: collapse; }
.sheet__table th, .sheet__table td { border: 1px solid #999; padding: 0 8px; height: 34px; text-align: left; }
.sheet__table thead th { background: var(--surface-2); }
.sheet__table tbody td:first-child { width: 3.5em; color: var(--muted); }
.sheet__notes { font-size: 0.85rem; }
/* Phones: smaller headings and cells so the columns fit the screen; in Large print the sheet itself
   scrolls sideways if it still does not fit, never the page. Print keeps the full-size sheet. */
@media screen and (max-width: 600px) {
  .sheet { padding: 14px 12px; overflow-x: auto; }
  .sheet__table { font-size: 0.85rem; }
  .sheet__table thead th { font-size: 0.8rem; line-height: 1.2; }
  .sheet__table th, .sheet__table td { padding: 0 5px; }
  .sheet__table tbody td:first-child { width: auto; }
}

/* ---------- Score calculator ---------- */
.calc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 18px; box-shadow: var(--shadow-1); }
@media (min-width: 720px) { .calc { grid-template-columns: 1fr 1fr; } }
.calc__cards { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; }
.calc__cards legend { font-weight: 600; margin-bottom: 8px; }
.calc__pick { display: grid; gap: 4px; font-size: 0.9rem; color: var(--muted); }
.calc__pick select { font: inherit; font-size: 1rem; min-height: 46px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: #fff; color: var(--fg); }
.calc__check { display: flex; gap: 8px; align-items: center; font-size: 0.9rem; }
.calc__total { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; margin: 0 0 8px; color: var(--ink); }
.calc__error { color: var(--red); font-weight: 700; }

/* ---------- Cribbage-style score track (HTML, under the info bar) ---------- */
.score-track { margin: -2px 0 10px; padding: 10px 14px; border-radius: 12px; background: #3b2a1a; background: linear-gradient(#5a3f25, #3b2a1a); color: #f7f3ea;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.score-track[hidden] { display: none; }
.score-track__row { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 600; }
.score-track__row + .score-track__row { margin-top: 6px; }
.score-track__lane { position: relative; height: 12px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, rgba(243, 227, 166, 0.5) 0 2px, transparent 2px calc(100% / 24)), #2a1d11; }
.score-track__peg { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; transition: left 0.6s ease; }
.score-track__value { text-align: right; }

@media print {
  :root { font-size: 12pt; }
  body { background: #fff; }
  .site-header, .site-footer, .no-print, .ad-slot, .skip-link { display: none !important; }
  .container { max-width: none; padding: 0; }
  .sheet { border: 0; padding: 0; margin: 0; }
  .sheet__table th, .sheet__table td { height: 0.95cm; border-color: #000; }
  .sheet__table thead th { background: #eee; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Game options (players, variant) ---------- */
.game-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
.game-options[hidden] { display: none; }
.game-options__item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.92rem; }
.game-options__item select { font: inherit; font-weight: 600; min-height: 44px; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); }

/* ---------- Daily deals ---------- */
.daily-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.daily-history h2 { font-size: 1.15rem; margin-top: 1.4em; }
/* Recent daily deals: equal tiles (weekday, number, status) that fill each row; a short strip
   (the first days after launch) stays on one row. */
.daily-strip { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 8px; }
.daily-strip__day { display: flex; }
.daily-strip__day > a, .daily-strip__day:not(:has(a)) { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 84px; padding: 8px 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); text-decoration: none; text-align: center; }
.daily-strip__day > a:hover { border-color: var(--felt); }
.daily-strip__weekday { font-size: 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.daily-strip__num { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.daily-strip__status { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.daily-strip__day--won > a, .daily-strip__day--won:not(:has(a)) { background: var(--won-bg); border-color: var(--won-line); }
.daily-strip__day--won .daily-strip__status { color: var(--ink); }
.daily-strip__day--played > a, .daily-strip__day--played:not(:has(a)) { background: var(--surface-2); }
.daily-strip__day.is-current > a, .daily-strip__day.is-current:not(:has(a)) { border: 2px solid var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.daily-strip__day.is-current .daily-strip__status { color: var(--gold-ink); }
.game-dialog__share { margin: 14px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.game-dialog__share[hidden] { display: none; }
.daily-cards { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.daily-cards > li { display: flex; flex: 1 1 200px; }
.daily-cards > li > a { flex: 1; }
.daily-cards a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 16px; border-radius: var(--radius); background: var(--felt-texture);
  color: #fff; text-decoration: none; font-weight: 600; box-shadow: var(--shadow-1); }
.daily-cards a:hover { color: #fff; box-shadow: var(--shadow-2); }
.daily-cards .daily-cards__num { font-family: var(--font-display); color: #f3e3a6; font-size: 0.95rem; white-space: nowrap; }

/* ---------- Game bar (above the table): info, timer, main controls ---------- */
.game-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 0 8px; padding: 8px 10px 8px 16px; border-radius: 14px; background: var(--felt-dark); color: #fff; box-shadow: 0 0 0 1px var(--frame-edge), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
/* Game bar rows: the info line (score, moves, timer) first; option menus on the left and the
   buttons on the right below it. Without options, info and buttons share one row. */
.game-bar__info { order: 1; flex: 1 1 auto; }
.game-bar .game-options { order: 2; }
.game-bar__buttons { order: 3; }
.game-bar__info { flex-basis: 100%; } /* its own row: the info text grows as the game loads, which must not wrap the buttons */
.game-bar__info { margin: 0; font-weight: 600; font-size: 0.95rem; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.game-bar__timer { font-variant-numeric: tabular-nums; color: #f3e3a6; display: inline-flex; align-items: center; gap: 5px; }
.game-bar__timer[hidden] { display: none; }
.game-bar__buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.btn-bar { font: inherit; font-size: 0.9rem; font-weight: 600; line-height: 1.2; min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.08); color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.btn-bar:hover { background: rgba(255, 255, 255, 0.18); }
.btn-bar:disabled { opacity: 0.4; cursor: default; }
.btn-bar--primary { background: var(--gold); border-color: var(--gold); color: #1f2421; }
.btn-bar--primary:hover { background: #d8b23a; }
.btn-bar--icon { min-width: 44px; justify-content: center; padding: 8px 10px; font-size: 1.1rem; }
.btn-bar[hidden] { display: none; }

.game-under { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; margin-top: 12px;
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.game-under .game-status { flex: 1 1 16em; margin: 0; font-weight: 600; }
.game-stats-panel { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.game-stats-panel[hidden] { display: none; }
.game-stats-panel div { padding: 4px 10px; border-radius: 10px; background: var(--surface-2); text-align: center; min-width: 4.6em; }
.game-stats-panel dt { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; }
.game-stats-panel dd { margin: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
kbd { font: inherit; font-size: 0.8em; font-weight: 600; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 0 var(--line); }

/* Full screen: the bar on top, then the table, the action buttons and the status line. The table
   first takes all the room left; site/fit-table.js then gives it the largest usual shape (3:4 or
   16:10) that fits, centered. Statistics and help wait until the player leaves full screen. */
.game-shell:fullscreen { background: var(--bg); padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow: auto; }
.game-shell:fullscreen > * { flex: none; margin-top: 0; }
.game-shell:fullscreen .table-frame { flex: 1 1 auto; min-height: 0; width: 100%; aspect-ratio: auto; margin-inline: auto; }
.game-shell:fullscreen .game-under { padding: 6px 12px; }
.game-shell:fullscreen .game-stats-panel, .game-shell:fullscreen .game-help { display: none; }
/* The full screen button shows "enter" or "exit"; browsers without full screen (iPhone) hide it. */
.btn-bar .icon--exit, .game-shell:fullscreen .btn-bar .icon--enter { display: none; }
.game-shell:fullscreen .btn-bar .icon--exit { display: block; }
.no-fullscreen [data-action="fullscreen"] { display: none; }
/* Phones held sideways: one compact bar row and a slimmer status line leave the table more height. */
@media (max-height: 500px) {
  .game-shell:fullscreen { padding: 6px 10px; gap: 6px; }
  .game-shell:fullscreen .game-bar { padding: 4px 10px; row-gap: 4px; }
  /* Info, menus and buttons share one row when they fit; the info text wraps before the buttons do. */
  .game-shell:fullscreen .game-bar__info { flex: 1 1 12em; min-width: 0; font-size: 0.8rem; line-height: 1.25; }
  .game-shell:fullscreen .btn-bar__label { display: none; } /* icon-only Undo and Hint, as on phones */
  .game-shell:fullscreen .game-bar .game-options { flex: none; }
  .game-shell:fullscreen .game-under { padding: 3px 10px; font-size: 0.85rem; }
  .game-shell:fullscreen .game-actions .btn-game { min-height: 40px; padding-block: 6px; }
}

/* Game pages: a compact header so the board starts higher. */
.game-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin: 0.35em 0 0.1em; }
.game-head + .game-shell, .game-head + .game-options { margin-top: 6px; }
.breadcrumbs { margin-top: 12px; }

/* Home: daily tiles of equal height, name above the label. */
.daily-cards a { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 76px; gap: 2px; }

/* Options live inside the game bar (light text on the dark bar). */
.game-bar .game-options { margin: 0; gap: 8px; }
.game-bar .game-options:empty { min-height: 36px; } /* reserved until the game fills in its menus */
.game-bar .game-options__item { color: #fff; font-size: 0.85rem; }
.game-bar .game-options__item select { min-height: 36px; padding: 4px 8px; background: rgba(255, 255, 255, 0.95); }
.game-head { display: block; }
.game-head__meta { align-items: center; margin-bottom: 8px; }
.game-head__alt { margin: 0 0 0 4px; }

/* Phones: three compact rows (info; options and timer; buttons) so the board starts in the
   first screen. Tap targets stay at least 44px for older hands. */
@media (max-width: 600px) {
  /* Above a live game only the title stays: breadcrumbs (also in structured data) and the info
     chips (repeated under the game) would push the player's own cards off the screen. */
  .breadcrumbs--game, .game-head__meta { display: none; }
  .game-head h1 { font-size: 1.4rem; margin-bottom: 4px; }
  .hero__art { display: none; } /* home: show the daily deals in the first screen instead */
  .game-bar { padding: 8px 10px; gap: 6px 8px; }
  .game-bar__info { display: contents; font-size: 0.85rem; } /* its info text and timer become bar items */
  .game-bar__info [data-info] { order: 1; flex: 1 1 100%; }
  .game-bar .game-options { order: 2; }
  .game-bar .game-options__item select { min-height: 44px; }
  .game-bar .game-options:empty { min-height: 44px; }
  .game-bar__timer { order: 3; margin-left: auto; }
  .game-bar__buttons { order: 4; flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; margin-left: 0; }
  .btn-bar { min-height: 44px; padding: 8px 12px; }
  .btn-bar--primary { flex: 1; justify-content: center; }
  .btn-bar__label { display: none; }
  .btn-bar--icon, .btn-bar[data-action="undo"], .btn-bar[data-action="hint"] { min-width: 44px; padding: 8px 10px; justify-content: center; }
  .daily-cards > li { flex-basis: 140px; }
}

/* Daily deals show their fixed rules where the option menus would be. */
.game-options__item--fixed { font-weight: 600; opacity: 0.9; } /* plain text: it is not a control */

/* Daily deal tiles: game names in the heading serif, like the game cards and "★ Today". */
.daily-cards a > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: 0.005em; }

/* The game area is centred when fitTable() narrows it to fit a short screen. */
.game-shell { margin-inline: auto; }

/* "How to win" guides on game pages: short tips with a bold lead-in, easy to scan. */
.strategy h3 { font-size: 1.08rem; margin: 1.3em 0 0.3em; }
.strategy p { margin: 0 0 0.8em; max-width: 46em; }
.strategy ul { padding-left: 1.2em; max-width: 46em; }
.strategy li { margin-bottom: 0.45em; }
.strategy li::marker { color: var(--ink-2); }