/* Standalone styling for the content pages. Brand felt greens and gold,
   mobile first, system fonts only, no external assets. */
:root {
  --felt-dark: #04150f;
  --felt-deep: #072b20;
  --felt: #0b4030;
  --gold: #d4af37;
  --gold-light: #f0d98c;
  --text: #e8eae9;
  --muted: #a9b3ae;
  --line: rgba(255, 255, 255, 0.12);
}
* { box-sizing: border-box; }
html { background: var(--felt-dark); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(23, 94, 66, 0.5), transparent 65%),
    var(--felt-dark);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}
h1, h2, h3, .brand, caption {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.25;
}
h1 { font-size: 1.85rem; margin: 0 0 0.5rem; color: var(--gold-light); }
h2 { font-size: 1.3rem; margin: 2rem 0 0.6rem; color: var(--gold-light); }
h3 { font-size: 1.05rem; margin: 1.2rem 0 0.4rem; color: var(--text); }
p, li { margin: 0.6rem 0; }
a { color: var(--gold-light); }
a:hover { color: #fff; }
main { max-width: 46rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
header.site, footer.site { max-width: 46rem; margin: 0 auto; padding: 1rem; }
header.site {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
header.site .brand { font-weight: 700; text-decoration: none; font-size: 1.05rem; }
header.site nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; justify-content: flex-end;
}
header.site nav a { text-decoration: none; font-size: 0.95rem; }
.cta, .button {
  display: inline-block; padding: 0.5rem 0.9rem; border-radius: 0.6rem;
  background: linear-gradient(180deg, var(--gold-light), #c49b2c);
  color: #241a05; font-weight: 700; text-decoration: none;
}
.button.ghost {
  background: transparent; color: var(--gold-light);
  border: 1px solid rgba(212, 175, 55, 0.5);
}
.crumbs { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; }
.crumbs a { color: var(--muted); }
.lede { font-size: 1.05rem; color: var(--muted); }
.note {
  background: var(--felt-deep); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 0.85rem 1rem; margin: 1.25rem 0;
}
.note h2 { margin: 0 0 0.4rem; font-size: 1rem; }
.note ul { margin: 0; padding-left: 1.1rem; }
.note li { margin: 0.25rem 0; color: var(--muted); font-size: 0.95rem; }
section { margin-top: 1.5rem; }
ol.steps li, ul li { margin: 0.4rem 0; }
.table-wrap { overflow-x: auto; margin: 0.9rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
caption { caption-side: top; text-align: left; color: var(--muted); font-size: 0.9rem; padding-bottom: 0.5rem; }
/* On a phone a wide table scrolls sideways: its caption stays in view instead
   of being cut off mid sentence, and each row keeps its name beside the
   figures as they scroll. The header's first cell stays with the names, so a
   column heading never slides over them, and every cell of that column is
   opaque, so a figure passing underneath is hidden rather than printed over a
   name. The edge line, and a short fade just past it, mark a figure half way
   under the names as cut off rather than let it pass for a shorter number
   (64.1% read as 4.1%). A swipe can still come to rest part way into a
   column, so they mark the cut; they cannot prevent it. The fade is no wider
   than a cell's left padding, so it covers nothing until the table scrolls.
   A box shadow rather than a border for the line, because a collapsed border
   stays behind when the cell sticks. */
.table-wrap caption { position: sticky; left: 0; max-width: calc(100vw - 2rem); }
.table-wrap thead tr > :first-child, .table-wrap tbody th {
  position: sticky; left: 0; z-index: 1; background: var(--felt-dark);
  box-shadow: inset -1px 0 0 var(--line);
}
.table-wrap thead tr > :first-child::after, .table-wrap tbody th::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: -0.6rem; width: 0.6rem;
  background: linear-gradient(to right, var(--felt-dark), rgba(4, 21, 15, 0));
  pointer-events: none;
}
/* Scrollable, so it takes keyboard focus (Safari never gives a scroll box
   focus on its own) and shows where that focus is. */
.table-wrap:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { color: var(--gold-light); }
tbody th { font-weight: 600; color: var(--muted); }
td { font-variant-numeric: tabular-nums; }
.cards { list-style: none; padding: 0; }
.cards li {
  background: var(--felt-deep); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 0.85rem 1rem; margin: 0.75rem 0;
}
.cards h3 { margin: 0 0 0.25rem; }
.mini { color: var(--muted); font-size: 0.9rem; }
.related { padding-left: 1.1rem; }
.glance {
  margin: 1rem 0 1.25rem; padding: 0.75rem 0.9rem;
  border: 1px solid rgba(212, 175, 55, 0.35); border-radius: 0.75rem; background: var(--felt-deep);
}
.glance-title { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.85rem; }
.glance dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; }
.glance dt { color: var(--muted); font-size: 0.8rem; line-height: 1.3; }
.glance dd { margin: 0.2rem 0 0; color: var(--gold-light); font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.glance table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.glance th, .glance td { padding: 0.3rem 0.35rem; text-align: right; vertical-align: bottom; }
.glance thead th { color: var(--muted); font-size: 0.78rem; font-weight: 400; line-height: 1.25; }
.glance th:first-child { text-align: left; padding-left: 0; }
.glance tbody td { color: var(--gold-light); font-weight: 700; }
.keep-reading ul { padding-left: 1.1rem; }
.guides { padding-left: 1.1rem; }
.guides li span { display: block; color: var(--muted); font-size: 0.92rem; }
.toc {
  background: var(--felt-deep); border: 1px solid var(--line);
  border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 1.25rem 0;
}
.toc-title { margin: 0 0 0.3rem; font-weight: 700; color: var(--gold-light); font-size: 0.9rem; }
.toc ol { margin: 0; padding-left: 1.2rem; }
.toc li { margin: 0.2rem 0; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.fromline { color: var(--muted); font-size: 0.85rem; margin-top: -0.2rem; }
.glossary dt { color: var(--gold-light); font-weight: 700; margin-top: 0.9rem; }
.glossary dd { margin: 0.15rem 0 0 0; color: var(--text); }
.fig { margin: 1rem 0; }
.fig svg { display: block; width: 100%; height: auto; }
.fig .fig-narrow { display: none; }
@media (max-width: 520px) {
  .fig .fig-wide { display: none; }
  .fig .fig-narrow { display: block; }
}
.fig figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.badge {
  display: inline-block; margin-left: 0.3rem; padding: 0.1rem 0.5rem;
  border: 1px solid rgba(212, 175, 55, 0.5); border-radius: 999px;
  color: var(--gold-light); font-size: 0.7rem; font-family: system-ui, sans-serif;
  font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; vertical-align: middle;
}
tr.ours th, tr.ours td { background: rgba(212, 175, 55, 0.07); }
/* The same gold tint on the sticky name cell, laid over the opaque ground so
   the figures scrolling under it stay hidden. */
.table-wrap tr.ours th { background: linear-gradient(rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0.07)), var(--felt-dark); }
/* Its fade starts from that same tinted ground. Starting from the plain one,
   it drew a dark band at the start of the row's first figure, even on a wide
   screen where nothing scrolls. */
.table-wrap tr.ours th::after {
  background: linear-gradient(to right, rgba(212, 175, 55, 0.07), rgba(212, 175, 55, 0)),
    linear-gradient(to right, var(--felt-dark), rgba(4, 21, 15, 0));
}
.cards li.ours { border-color: rgba(212, 175, 55, 0.45); }
.cta-box {
  background: var(--felt); border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 0.75rem; padding: 1rem; margin-top: 2rem;
}
.actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.8rem; }
/* The payout calculator. The form stays hidden until its script has run, so
   a page without JavaScript shows the worked example and nothing inert. */
.calc-form {
  margin: 0.75rem 0; padding: 0.85rem 1rem; background: var(--felt-deep);
  border: 1px solid var(--line); border-radius: 0.75rem;
}
.calc-wheel { border: 0; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.calc-wheel legend { color: var(--gold-light); font-weight: 700; padding: 0; margin-bottom: 0.35rem; }
.calc-wheel label { display: inline-flex; gap: 0.45rem; align-items: center; }
.calc-bet {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: flex-end;
  padding: 0.6rem 0; border-top: 1px solid var(--line);
}
.calc-bet label {
  display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; max-width: 100%;
  color: var(--muted); font-size: 0.85rem;
}
/* The bet names run long in some languages: the bet's field takes the row
   and its select fills it, so a phone never scrolls sideways. */
.calc-bet label:first-child { flex: 1 1 14rem; }
.calc-bet select, .calc-bet input {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--felt-dark);
  border: 1px solid rgba(212, 175, 55, 0.6); border-radius: 0.5rem; padding: 0.35rem 0.5rem; min-height: 2.75rem;
}
.calc-bet select { width: 100%; }
.calc-bet input { width: 8.5rem; }
.calc-bet input[aria-invalid="true"] { border-color: #e57373; box-shadow: 0 0 0 1px #e57373; }
.calc-remove, .calc-add .button {
  font: inherit; font-size: 0.95rem; cursor: pointer; min-height: 2.75rem;
}
.calc-remove {
  background: transparent; color: var(--gold-light); border: 1px solid rgba(212, 175, 55, 0.5);
  border-radius: 0.5rem; padding: 0.35rem 0.8rem;
}
.calc-add { margin: 0.6rem 0 0; }
.calc-add .button:disabled { opacity: 0.5; cursor: default; }
.calc-summary { font-weight: 600; }
/* The Martingale calculator: four number fields that share a row where they fit. */
.mcalc-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem 0.9rem; }
.mcalc-fields label { display: flex; flex-direction: column; justify-content: flex-end; gap: 0.2rem; color: var(--muted); font-size: 0.85rem; }
.mcalc-fields input {
  font: inherit; font-size: 1rem; color: var(--text); background: var(--felt-dark); width: 100%;
  border: 1px solid rgba(212, 175, 55, 0.6); border-radius: 0.5rem; padding: 0.35rem 0.5rem; min-height: 2.75rem;
}
.mcalc-fields input[aria-invalid="true"] { border-color: #e57373; box-shadow: 0 0 0 1px #e57373; }
/* The press kit. */
.facts { display: grid; grid-template-columns: minmax(7rem, max-content) 1fr; gap: 0.35rem 1rem; margin: 0.75rem 0; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
@media (max-width: 30rem) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 0.4rem; } }
.press-logo { margin: 0.75rem 0; }
.press-logo img { display: block; }
.downloads { padding-left: 1.1rem; }
.press-shot { margin: 1.25rem 0; }
.press-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 0.5rem; }
.press-shot figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.9rem; }
.press-shot.tall img { max-width: 18rem; }
.chart { margin: 1.25rem 0 0.5rem; }
.chart img { display: block; width: 100%; height: auto; border-radius: 0.5rem; }
.chart figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.85rem; }
.file-links { color: var(--muted); font-size: 0.9rem; }
/* A figure never breaks across lines ("35 to" over "1"): the table scrolls. */
.calc td, #key-payouts td { white-space: nowrap; }
.calc td[colspan] { white-space: normal; min-width: 12rem; }
.calc tfoot th, .calc tfoot td { color: var(--gold-light); font-weight: 700; border-bottom: 0; }
.calc .table-wrap tfoot th {
  position: sticky; left: 0; z-index: 1; background: var(--felt-dark);
  box-shadow: inset -1px 0 0 var(--line);
}
/* The email box, after the article. */
.news {
  max-width: 46rem; margin: 2rem auto 0; padding: 0 1rem;
}
.news > * { margin-left: 0; margin-right: 0; }
.news-title { font-size: 1.15rem; margin: 0 0 0.4rem; }
.news-how, .news-privacy, .news-nojs { color: var(--muted); font-size: 0.95rem; }
.news-form { margin: 0.75rem 0 0; }
.news-label { display: block; font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.news-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.news-input {
  flex: 1 1 14rem; min-width: 0; min-height: 2.75rem; padding: 0.4rem 0.6rem;
  font: inherit; font-size: 1rem; color: var(--text); background: var(--felt-deep);
  border: 1px solid rgba(212, 175, 55, 0.6); border-radius: 0.6rem;
}
.news-input[aria-invalid="true"] { border-color: #e57373; box-shadow: 0 0 0 1px #e57373; }
.news-button {
  min-height: 2.75rem; padding: 0.4rem 1rem; font: inherit; font-weight: 700; cursor: pointer;
  color: #241a05; background: linear-gradient(180deg, var(--gold-light), #c49b2c);
  border: 0; border-radius: 0.6rem;
}
.news-button:disabled { opacity: 0.6; cursor: default; }
.news-status { min-height: 1.5em; margin: 0.5rem 0 0; }
/* The field only a program fills in: off screen, out of the tab order. */
.news-trap { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
.news-status[data-outcome="busy"], .news-status[data-outcome="failed"], .news-status[data-outcome="invalid"], .news-status[data-outcome="wait"] { color: var(--gold-light); }
/* The share row, between the article and the footer. */
.share { max-width: 46rem; margin: 0 auto; padding: 0.5rem 1rem 0; }
.share-title { font-size: 1rem; margin: 0 0 0.5rem; color: var(--muted); }
.share-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0; }
.share-button, .share-link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem;
  padding: 0.35rem 0.85rem;
  font: inherit; font-size: 0.95rem; color: var(--gold-light); background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.6); border-radius: 0.6rem; text-decoration: none; cursor: pointer;
}
.share-button:hover, .share-link:hover { color: #fff; border-color: var(--gold-light); }
.share-button[hidden] { display: none; }
.share-copied { color: var(--muted); font-size: 0.9rem; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; margin-top: 2rem; }
footer.site .honesty { color: var(--text); }
footer.site .links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
footer.site .fine { font-size: 0.8rem; }
footer.site .langs { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.85rem; margin: 0.6rem 0; }
.cta { white-space: nowrap; }
/* Long compound words break at a syllable instead of running past the edge
   of a phone. */
:lang(de) h1, :lang(de) h2, :lang(de) th,
:lang(nl) h1, :lang(nl) h2, :lang(nl) th,
:lang(da) h1, :lang(da) h2, :lang(da) th,
:lang(sv) h1, :lang(sv) h2, :lang(sv) th,
:lang(el) h1, :lang(el) h2, :lang(el) th { hyphens: auto; -webkit-hyphens: auto; }
@media (min-width: 40rem) {
  body { font-size: 18px; }
  h1 { font-size: 2.3rem; }
  h2 { font-size: 1.5rem; }
}