/* Dragon Casino design system. Tokens match Dragon Football and Dragon Racing (ink, paper,
   Dragon red, Fraunces / Inter / JetBrains Mono); components are the racing set, cut down
   to what guides need, plus guide-only pieces (byline, cards, ad block, safer gambling). */

/* Self-hosted variable fonts, Latin subset (SIL Open Font Licence, see assets/fonts). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600 800; font-display: swap; src: url("../fonts/fraunces.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); }

:root {
	--ink: #0a0a0a;
	--ink-soft: #2a2a2a;
	--ink-muted: #6a6a6a;
	--paper: #ffffff;
	--paper-warm: #faf8f5;
	--rule: #e5e5e5;
	--rule-strong: #cccccc;
	--accent: #c8102e;
	--accent-dark: #a30c25;
	--accent-wash: #fff5f6;
	--serif: "Fraunces", Georgia, "Times New Roman", serif;
	--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
	--container: 1180px;
	--gutter: 24px;
	--radius: 0;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper-warm); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
img { max-width: 100%; height: auto; }

.dc-skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: #fff; padding: 8px 12px; z-index: 10; }
.dc-skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- masthead + footer */
.dc-mast { background: var(--ink); color: #fff; }
.dc-mast-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dc-logo { display: block; flex-shrink: 0; line-height: 0; }
.dc-logo img { display: block; height: 26px; width: auto; }
.dc-logo:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.dc-nav { display: flex; gap: 22px; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.dc-nav::-webkit-scrollbar { display: none; }
.dc-nav a { color: #cfcfcf; text-decoration: none; font: 600 13px/1 var(--sans); text-transform: uppercase; letter-spacing: .04em; padding: 6px 0; border-bottom: 2px solid transparent; }
.dc-nav a:hover, .dc-nav a.is-on { color: #fff; border-bottom-color: var(--accent); }
.dc-accentline { height: 3px; background: var(--accent); }
/* Every game, one tap from any page: a quiet row under the masthead, scrolling sideways on phones. */
.dc-gamesnav { background: var(--paper); border-bottom: 1px solid var(--rule); }
.dc-gamesnav-in { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 22px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.dc-gamesnav-in::-webkit-scrollbar { display: none; }
.dc-gamesnav a { font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); text-decoration: none; padding: 13px 0 11px; border-bottom: 2px solid transparent; }
.dc-gamesnav a:hover { color: var(--accent); }
.dc-gamesnav a.is-on { color: var(--ink); border-bottom-color: var(--accent); }
.dc-gamesnav-in.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }

.dc-foot { background: var(--ink); color: #b5b5b5; margin-top: 48px; border-top: 3px solid var(--accent); font-size: 13px; }
.dc-foot-in { max-width: var(--container); margin: 0 auto; padding: 36px var(--gutter) 22px; }
.dc-foot p { margin: 0; }
.dc-foot a { color: #e6e6e6; text-decoration: none; }
.dc-foot a:hover { color: #fff; text-decoration: underline; }
.dc-foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; padding-bottom: 26px; border-bottom: 1px solid #2c2c2c; }
.dc-logo--foot { display: inline-block; margin-bottom: 14px; }
.dc-logo--foot img { height: 22px; }
.dc-foot-brand p { line-height: 1.6; max-width: 340px; }
.dc-foot-col h2 { font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: #fff; margin: 4px 0 12px; }
.dc-foot-col ul { list-style: none; margin: 0; padding: 0; }
.dc-foot-col li { padding: 4px 0; }
.dc-foot-rg { display: flex; align-items: center; gap: 14px; padding: 18px 0; border-bottom: 1px solid #2c2c2c; line-height: 1.55; }
.dc-foot-rg a { text-decoration: underline; text-decoration-color: #555; }
.dc-age { font-weight: 700; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; }
.dc-foot-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding-top: 16px; font-size: 12px; }
.dc-foot-family { display: flex; gap: 18px; flex-wrap: wrap; }
.dc-ad { font: 700 9px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; border: 1px solid #666; padding: 2px 4px; color: #b5b5b5; vertical-align: 2px; margin-left: 3px; }

/* ---------------------------------------------------------------- page structure */
.dc-wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter) 24px; }
.dc-crumbs ol { list-style: none; margin: 0; padding: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font: 600 12px/1.4 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); }
.dc-crumbs li + li::before { content: "/"; color: var(--rule-strong); margin-right: 6px; }
.dc-crumbs a { text-decoration: none; }
.dc-head { padding: 8px 0 16px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
.dc-h1 { font: 700 40px/1.05 var(--serif); margin: 10px 0 10px; letter-spacing: -.01em; }
.dc-kick { margin: 10px 0 0; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.dc-lede { font-size: 16px; color: var(--ink-soft); margin: 6px 0 10px; max-width: 760px; }
.dc-byline { font-size: 13px; color: var(--ink-muted); margin: 8px 0 0; }
.dc-byline a { color: var(--ink-soft); font-weight: 600; }
.dc-dot { color: var(--rule-strong); margin: 0 8px; }

.dc-sec { font: 600 32px/1.1 var(--serif); letter-spacing: -.008em; margin: 48px 0 0; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.dc-notice { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); font-size: 14px; }
.dc-notice.is-warn { border-color: var(--accent); background: var(--accent-wash); }
.dc-empty { color: var(--ink-muted); padding: 12px 0; max-width: 720px; }
.dc-badge { display: inline-block; font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; padding: 4px 6px; border: 1px solid var(--accent); color: var(--accent); }

.dc-links { display: flex; gap: 12px; flex-wrap: wrap; }
.dc-btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; font: 600 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; padding: 14px 18px; }
.dc-btn:hover { background: var(--accent-dark); color: #fff; }
.dc-btn.is-ghost { background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); }

/* ---------------------------------------------------------------- tables */
.dc-tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.dc-tbl th { text-align: left; font: 700 11px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-muted); background: var(--paper-warm); padding: 10px 12px; border-bottom: 1px solid var(--rule); }
.dc-tbl td { padding: 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.dc-tbl tbody tr:last-child td { border-bottom: 0; }
.dc-tbl .dc-r { text-align: right; font-family: var(--mono); font-weight: 600; white-space: nowrap; }
.dc-tbl-wrap { overflow-x: auto; margin: 6px 0 18px; }
.dc-tbl .dc-c { text-align: center; }
.dc-tbl-cap { caption-side: bottom; text-align: left; font-size: 12.5px; color: var(--ink-muted); padding-top: 8px; }
.dc-tbl--grid th, .dc-tbl--grid td { padding: 8px 6px; font: 600 13px/1 var(--mono); }
.dc-tbl--grid th[scope="row"] { color: var(--ink); background: var(--paper-warm); }
.dc-bac-d { color: var(--accent); background: var(--accent-wash); }
.dc-bac-s { color: var(--ink-muted); }
.dc-dice td { color: var(--ink-soft); }
.dc-dice td.is-seven { color: #fff; background: var(--accent); }
.dc-slingo { max-width: 320px; }
.dc-slingo td { font: 600 18px/1 var(--serif); padding: 14px 0; }
.dc-slingo td.is-4 { color: #fff; background: var(--accent); }
.dc-slingo td.is-3 { color: var(--accent); background: var(--accent-wash); }
.dc-slingo td.is-2 { color: var(--ink-muted); }
.dc-ab-chart .is-andar { fill: var(--accent); }
.dc-ab-chart .is-bahar { fill: var(--ink); }
.dc-key { display: inline-block; width: 10px; height: 10px; margin: 0 4px 0 10px; vertical-align: -1px; }
.dc-key:first-child { margin-left: 0; }
.dc-key.is-andar { background: var(--accent); }
.dc-key.is-bahar { background: var(--ink); }
/* Wide tables scroll sideways inside their wrapper. Tables used to be forced to 520px, which
   pushed even 2-column tables off a phone screen; now they're only as wide as their content.
   The first column stays put while the rest scrolls, and site.js adds a fade at the right edge
   while there's more to see. */
.dc-tbl-wrap .dc-tbl { margin: 0; overflow: visible; }
.dc-tbl-wrap .dc-tbl:not(.dc-slingo) :is(th, td):first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 var(--rule); }
:where(.dc-tbl-wrap .dc-tbl td:first-child) { background: var(--paper); }
.dc-tbl-wrap .dc-tbl:not(.dc-tbl--grid) td:first-child { min-width: 8em; }
.dc-tbl-wrap.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }

/* ---------------------------------------------------------------- home, hubs and guide lists (DF editorial: rules, no boxes) */
.dc-home-head { padding: 36px 0 28px; }
.dc-h1--home { font-size: clamp(40px, 6vw, 72px); line-height: .98; letter-spacing: -.02em; max-width: 920px; margin: 14px 0 16px; }
.dc-home-head .dc-lede { font-size: 18px; line-height: 1.55; max-width: 720px; }

.dc-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-index.is-solo { grid-template-columns: minmax(0, 1fr); }
.dc-index.is-solo .dc-index-col { padding: 26px 0 8px; }
.dc-index.is-solo .dc-topics { columns: 2; column-gap: 48px; }
.dc-index.is-solo .dc-topics li { break-inside: avoid; }
.dc-index-col { padding: 26px 28px 8px; }
.dc-index-col:first-child { padding-left: 0; }
.dc-index-col:last-child { padding-right: 0; }
.dc-index-col + .dc-index-col { border-left: 1px solid var(--rule); }
.dc-index-num { margin: 0 0 14px; font: 600 64px/.85 var(--serif); letter-spacing: -.025em; color: var(--accent); font-variant-numeric: tabular-nums; }
.dc-index-name { font: 600 30px/1.1 var(--serif); letter-spacing: -.01em; margin: 8px 0 10px; }
.dc-index-name a { text-decoration: none; }
.dc-index-name a:hover { color: var(--accent); }
.dc-index-dek { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 18px; }
.dc-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.dc-topics li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.dc-topics a { font-weight: 600; text-decoration: none; }
.dc-topics a:hover { color: var(--accent); }
.dc-topics .is-soon { color: var(--ink-muted); }
.dc-arrow { color: var(--accent); font-weight: 600; }
.dc-soon { font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); }

.dc-rows { list-style: none; margin: 0; padding: 0; }
.dc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--rule); }
.dc-row-h { font: 600 24px/1.15 var(--serif); letter-spacing: -.008em; margin: 0 0 6px; }
.dc-row-h a { text-decoration: none; }
.dc-row-h a:hover { color: var(--accent); }
.dc-row-dek { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 680px; }
.dc-row-meta { margin: 0; font: 600 10px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-muted); white-space: nowrap; }
.dc-row-cost { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }
.dc-row-cost-k { margin-right: 8px; font: 600 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.dc-row-cost-v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.dc-row-cost-on::before { content: "\00b7"; margin: 0 6px 0 2px; color: var(--ink-muted); }
.dc-hub-intro { margin: 0 0 8px; max-width: 720px; font-size: 15.5px; color: var(--ink-soft); }
.dc-next { margin: 22px 0 0; font-size: 14px; color: var(--ink-soft); }
.dc-next .dc-kick { display: inline; margin: 0 10px 0 0; }

.dc-promises { list-style: none; counter-reset: dc-p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.dc-promises li { counter-increment: dc-p; padding: 18px 0 18px 44px; border-bottom: 1px solid var(--rule); position: relative; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.dc-promises li::before { content: counter(dc-p, decimal-leading-zero); position: absolute; left: 0; top: 20px; font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
.dc-promises strong { color: var(--ink); }

/* ---------------------------------------------------------------- homepage hero: roulette simulator */
.dc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; padding: 28px 0 8px; }
.dc-hero-note { font-size: 14px; color: var(--ink-muted); margin: 18px 0 0; max-width: 520px; }
.dc-sim { margin: 0; }
.dc-sim-wheel { max-width: 380px; margin: 0 auto; aspect-ratio: 1; }
.dc-ball { opacity: 0; transition: opacity .25s ease; }
.dc-sim-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin: 20px 0 0; }
.dc-btn:disabled { opacity: .5; cursor: wait; }
.dc-btn:focus-visible, .dc-sim-reset:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.dc-sim-reset { background: none; border: 0; padding: 6px 2px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.dc-sim-ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 20px 0 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.dc-sim-ledger div { padding: 10px 0 12px; }
.dc-sim-ledger div + div { padding-left: 12px; border-left: 1px solid var(--rule); }
.dc-sim-ledger dt { font: 600 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-sim-ledger dd { margin: 6px 0 0; font: 600 20px/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.dc-sim-ledger .is-kept dd { color: var(--accent); }
.dc-sim-pct { display: block; margin-top: 4px; font: 600 10px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-muted); }
.dc-sim-last { margin: 10px 0 0; font: 500 12px/1.4 var(--mono); color: var(--ink-muted); min-height: 1.4em; }
.dc-sim figcaption { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
/* The controls and tally carry display rules, which would beat the hidden attribute and show
   dead buttons to visitors without JavaScript. */
.dc-sim [hidden] { display: none; }

/* ---------------------------------------------------------------- homepage: what each game costs */
.dc-sec-dek { margin: 12px 0 8px; font-size: 15px; color: var(--ink-soft); max-width: 720px; }
.dc-costs { list-style: none; margin: 0; padding: 0; }
.dc-cost { display: grid; grid-template-columns: 240px minmax(0, 1fr) 150px; gap: 20px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.dc-cost-name { font-weight: 600; font-size: 14.5px; }
.dc-cost-name a { text-decoration: none; }
.dc-cost-name a:hover { color: var(--accent); }
.dc-cost-track { position: relative; height: 12px; background: linear-gradient(var(--rule), var(--rule)) 0 50% / 100% 1px no-repeat; }
.dc-cost-bar { position: absolute; top: 0; bottom: 0; left: var(--from); width: calc(var(--to) - var(--from)); background: var(--accent); transform-origin: left center; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.dc-cost:nth-child(2) .dc-cost-bar { transition-delay: .08s; }
.dc-cost:nth-child(3) .dc-cost-bar { transition-delay: .16s; }
.dc-cost:nth-child(4) .dc-cost-bar { transition-delay: .24s; }
.dc-cost:nth-child(5) .dc-cost-bar { transition-delay: .32s; }
.dc-cost:nth-child(6) .dc-cost-bar { transition-delay: .4s; }
.dc-js .dc-costs:not(.is-in) .dc-cost-bar { transform: scaleX(0); }
.dc-cost-val { font: 600 13px/1.3 var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
	.dc-cost-bar, .dc-ball { transition: none; }
	.dc-js .dc-costs:not(.is-in) .dc-cost-bar { transform: none; }
}

/* ---------------------------------------------------------------- guides and trust pages */
.dc-trust.has-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
.dc-toc { position: sticky; top: 16px; font-size: 14px; border-left: 2px solid var(--rule); padding-left: 14px; }
.dc-toc-h { font: 700 12px/1 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 4px 0 10px; list-style: none; }
.dc-toc-h::-webkit-details-marker { display: none; }
.dc-toc-n { display: none; }
/* On a wide screen the list is always shown, so the heading isn't a toggle. */
@media (min-width: 861px) { .dc-toc-h { pointer-events: none; } }
.dc-toc ol { margin: 0; padding-left: 18px; }
.dc-toc li { padding: 3px 0; }
.dc-toc a { text-decoration: none; color: var(--ink-soft); }
.dc-toc a:hover { color: var(--accent); }
.dc-prose { font-size: 16px; line-height: 1.65; max-width: 720px; }
.dc-prose h2 { font: 700 24px/1.25 var(--serif); margin: 34px 0 10px; scroll-margin-top: 16px; }
.dc-prose h2:first-child { margin-top: 4px; }
.dc-prose h3 { font: 700 17px/1.3 var(--sans); margin: 22px 0 6px; }
.dc-prose p, .dc-prose ul, .dc-prose ol { margin: 0 0 14px; }
.dc-prose ul, .dc-prose ol { padding-left: 22px; }
.dc-prose li { margin-bottom: 4px; }
.dc-prose a { color: var(--accent-dark); text-decoration-color: currentColor; }
.dc-prose code { font: 500 14px var(--mono); background: var(--paper); border: 1px solid var(--rule); border-radius: 4px; padding: 1px 5px; }
.dc-prose .dc-tbl { font-size: 14px; margin: 6px 0 18px; }
.dc-keyfacts { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0 6px; margin: 0 0 24px; }
.dc-keyfacts > p:first-child { font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); }
.dc-keyfacts p { margin: 0 0 6px; }
.dc-keyfacts ul { margin: 0; }
.dc-rg-help { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); padding: 4px 0 6px; margin-bottom: 8px; }
.dc-reviewed { margin-top: 36px !important; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--ink-muted); }

.dc-cta { background: var(--ink); color: #e6e6e6; padding: 20px 22px 22px; margin: 32px 0 14px; }
.dc-cta-lab { font: 700 10px/1 var(--sans) !important; text-transform: uppercase; letter-spacing: .08em; color: #b5b5b5; margin: 0 0 8px !important; }
.dc-cta-lab span { border: 1px solid #b5b5b5; padding: 2px 4px; margin-left: 6px; }
.dc-cta-h { font: 700 20px/1.25 var(--serif); color: #fff; margin: 0 0 6px !important; }
.dc-cta-s { font-size: 13px; line-height: 1.5; margin: 0 0 12px !important; }
.dc-prose .dc-cta a:not(.dc-btn) { color: #fff; }
.dc-prose .dc-cta .dc-btn { color: #fff; text-decoration: none; }

.dc-rg { display: flex; gap: 14px; align-items: flex-start; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0; margin: 28px 0 18px; font-size: 14px; line-height: 1.55; }
.dc-rg p { margin: 0 !important; }
.dc-rg a { color: var(--accent-dark); }
/* FAQ: question and answer pairs divided by rules, the same as the rest of the guide. */
.dc-faq h3 { font: 700 17px/1.35 var(--sans); margin: 0; padding: 16px 0 6px; border-top: 1px solid var(--rule); }
.dc-faq h3:first-child { border-top-color: var(--ink); }
.dc-faq p { margin: 0 0 4px; }
.dc-sources { border-top: 2px solid var(--ink); margin-top: 36px; padding-top: 14px; font-size: 14px; color: var(--ink-soft); }
.dc-prose h2.dc-sources-h { font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .14em; color: var(--accent); margin: 0 0 10px; }
.dc-sources ul { padding-left: 18px; margin-bottom: 12px; }
.dc-sources li { margin-bottom: 6px; line-height: 1.5; }
.dc-sources p { margin: 0 0 8px; line-height: 1.55; }
.dc-author { border-top: 1px solid var(--rule); margin-top: 28px; padding-top: 14px; font-size: 14px; color: var(--ink-soft); }
.dc-author-h { font: 700 12px/1 var(--sans) !important; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); margin: 0 0 8px !important; }

/* ---------------------------------------------------------------- diagrams (inline SVG from includes/diagrams.php) */
.dc-fig { margin: 18px 0 24px; }
.dc-fig figcaption { font-size: 13.5px; line-height: 1.55; color: var(--ink-muted); margin-top: 8px; }
.dc-fig figcaption strong { color: var(--ink); }
.dc-svg { display: block; width: 100%; height: auto; }
.dc-fig--wheel .dc-svg { max-width: 420px; margin: 0 auto; }
.dc-fig-scroll { overflow-x: auto; }
.dc-layout[data-orient="wide"] { min-width: 560px; }
/* Phones get the tall layout: the wide one would need a sideways scroll to reach 25 to 36. */
/* Held to 72% of the screen height so the readout below shows after a tap; width follows the shape. */
.dc-layout[data-orient="tall"] { display: none; width: auto; height: min(72vh, 715px); max-width: 100%; margin: 0 auto; }
@media (max-width: 599px) {
	.dc-layout[data-orient="wide"] { display: none; }
	.dc-layout[data-orient="tall"] { display: block; }
}
.dc-layout .dc-out { font-family: var(--sans); font-size: 13px; }

/* ---------------------------------------------------------------- blackjack: strategy chart, trainer, bust bars */
.dc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dc-barcell { width: 40%; vertical-align: middle !important; }
.dc-bar { display: block; height: 10px; background: var(--ink-muted); }
.dc-bar.is-weak { background: var(--accent); }

.dc-bjchart { border-collapse: collapse; background: var(--paper); font: 600 12px/1 var(--mono); margin: 0 auto; }
.dc-bjchart th, .dc-bjchart td { text-align: center; padding: 0; height: 30px; min-width: 32px; border: 1px solid var(--paper); }
.dc-bjchart thead th { color: var(--ink); background: var(--paper-warm); border-bottom: 2px solid var(--ink); }
.dc-bjchart tbody th[scope="row"] { text-align: left; padding: 0 10px 0 0; font-family: var(--sans); font-size: 13px; white-space: nowrap; background: var(--paper); }
.dc-bjchart .dc-bjchart-corner { text-align: left; font: 700 10px/1.2 var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-muted); padding-right: 10px; }
.dc-bjchart-sec th { text-align: left !important; font: 700 11px/1 var(--sans) !important; text-transform: uppercase; letter-spacing: .08em; color: var(--accent) !important; padding: 16px 0 6px !important; background: var(--paper) !important; height: auto !important; }
.dc-bjchart td.is-h, .dc-bjkey-sw.is-h { background: var(--paper-warm); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.dc-bjchart td.is-s, .dc-bjkey-sw.is-s { background: var(--ink); color: #fff; }
.dc-bjchart td.is-d, .dc-bjchart td.is-ds, .dc-bjkey-sw.is-d, .dc-bjkey-sw.is-ds { background: var(--accent); color: #fff; }
.dc-bjchart td.is-p, .dc-bjkey-sw.is-p { background: var(--accent-wash); color: var(--accent-dark); box-shadow: inset 0 0 0 1px var(--accent); }
.dc-bjchart td.is-r, .dc-bjkey-sw.is-r { background: var(--rule-strong); color: var(--ink); }
.dc-bjchart td.is-asked { outline: 3px solid var(--ink); outline-offset: -3px; position: relative; z-index: 2; }
.dc-bjchart td.is-s.is-asked { outline-color: var(--accent); }
.dc-bjfig .dc-tbl-wrap .dc-bjchart :is(th, td):first-child { box-shadow: none; }
.dc-bjkey { list-style: none; margin: 10px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; }
.dc-bjkey li { margin: 0; display: flex; gap: 8px; align-items: baseline; }
.dc-bjkey-sw { flex: none; display: inline-block; min-width: 26px; padding: 4px 0; text-align: center; font: 600 11px/1 var(--mono); }

.dc-bjtrain { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 14px; }
.dc-bjtrain-hands { display: grid; gap: 12px; }
.dc-bjtrain-row { display: flex; align-items: center; gap: 14px; margin: 0 !important; }
.dc-bjtrain-lab { width: 108px; flex: none; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-bjtrain-cards { display: flex; gap: 8px; }
.dc-bjtrain-total { font: 600 15px/1 var(--serif); margin-left: 6px; }
.dc-card { width: 48px; height: 68px; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.dc-card b { font: 700 22px/1 var(--serif); }
.dc-card i { font-style: normal; font-size: 18px; line-height: 1; }
.dc-card.is-red { color: var(--accent); }
.dc-card.is-dealt { animation: dc-deal .32s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dc-deal { from { opacity: 0; transform: translateY(-10px) rotate(-3deg); } to { opacity: 1; transform: none; } }
.dc-bjtrain-moves { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.dc-bjtrain-moves[hidden] { display: none; }
.dc-bjtrain-moves .dc-btn { padding: 12px 14px; }
.dc-bjtrain-moves .dc-btn:disabled { cursor: default; opacity: .45; }
.dc-bjtrain-moves .dc-btn.is-picked { opacity: 1; border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.dc-bjtrain-moves .dc-btn.is-right { opacity: 1; background: var(--accent); border-color: var(--accent); color: #fff; }
.dc-bjtrain-verdict { margin: 14px 0 0 !important; min-height: 3.2em; font-size: 15px; }
.dc-bjtrain-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0 !important; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-bjtrain-foot .dc-btn[hidden] { display: none; }
.dc-bjtrain figcaption { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .dc-card.is-dealt { animation: none; } }

/* Baccarat dealer: reuses the trainer's card rows and the homepage ledger. */
.dc-bacdeal { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 14px; }
.dc-bacdeal-steps { margin: 14px 0 0 !important; padding-left: 22px !important; min-height: 9em; font-size: 15px; }
.dc-bacdeal-steps li { margin-bottom: 4px; }
.dc-bacdeal-ledger[hidden] { display: none; }
.dc-bacdeal .dc-btn[aria-disabled="true"] { opacity: .5; cursor: progress; }
.dc-tbl td.is-asked { outline: 3px solid var(--ink); outline-offset: -3px; position: relative; z-index: 2; }

/* ---------------------------------------------------------------- crash games: the reach limit chart and slider */
.dc-crashfig { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0 12px; }
.dc-crashfig-control { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px !important; }
.dc-crashfig-control[hidden] { display: none; }
.dc-crashfig-control label { font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-crashfig-control output { font: 700 22px/1 var(--serif); color: var(--ink); letter-spacing: 0; text-transform: none; margin-left: 6px; font-variant-numeric: tabular-nums; }
.dc-crashfig-control input { flex: 1 1 260px; accent-color: var(--accent); }
.dc-crashchart-grid { stroke: var(--rule); stroke-width: 1; }
.dc-crashchart-tick { stroke: var(--ink-muted); stroke-width: 1; }
.dc-crashchart-lab { font: 500 11px var(--mono); fill: var(--ink-muted); }
.dc-crashchart-axis { font: 600 11px var(--sans); fill: var(--ink-soft); }
.dc-crashchart-line { fill: none; stroke-width: 2.5; }
.dc-crashchart-line.is-0, .dc-crashchart-marker circle.is-0 { stroke: var(--ink); }
.dc-crashchart-line.is-0 { stroke-dasharray: 7 4; }
.dc-crashchart-line.is-1, .dc-crashchart-marker circle.is-1 { stroke: var(--accent); }
.dc-crashchart-marker line { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.dc-crashchart-marker circle { fill: var(--paper); stroke-width: 2.5; }
.dc-key.is-crash-0 { background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 6px); }
.dc-key.is-crash-1 { background: var(--accent); }
.dc-crashfig-read { list-style: none; margin: 8px 0 0 !important; padding: 0 !important; font-size: 15px; }
.dc-crashfig-read li { padding: 8px 0; border-top: 1px solid var(--rule); margin: 0; }
.dc-crashfig-read b { font: 600 14px var(--mono); font-variant-numeric: tabular-nums; }
.dc-crashfig-read .dc-key { margin: 0 8px 0 0; }

/* ---------------------------------------------------------------- Sic Bo: totals chart and dice roller */
.dc-sicbofig { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0 12px; }
.dc-dicechart-axis { stroke: var(--ink); stroke-width: 1.5; }
.dc-dicechart-bar.is-small { fill: var(--ink); }
.dc-dicechart-bar.is-big { fill: var(--accent); }
.dc-dicechart-triple { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.dc-dicechart-n { font: 500 11px var(--mono); fill: var(--ink-muted); }
.dc-dicechart-lab { font: 600 12px var(--mono); fill: var(--ink); }
.dc-dicechart-brace { fill: none; stroke: var(--ink-muted); stroke-width: 1; }
.dc-dicechart-range { font: 600 12px var(--sans); fill: var(--ink-soft); }
.dc-dicechart-obs { stroke: var(--ink); stroke-width: 3; }
.dc-key.is-small { background: var(--ink); }
.dc-key.is-big { background: var(--accent); }
.dc-key.is-triple { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); }
.dc-sicbo-roll { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; }
.dc-sicbo-dice { display: flex; gap: 8px; }
.dc-die { width: 44px; height: 44px; }
.dc-die rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.dc-die circle { fill: var(--ink); }
.dc-die.is-rolled { animation: dc-roll .34s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dc-roll { from { opacity: 0; transform: translateY(-8px) rotate(-25deg); } to { opacity: 1; transform: none; } }
.dc-sicbo-result { margin: 12px 0 0 !important; min-height: 3em; font-size: 15px; }
.dc-sicbo-ledger[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .dc-die.is-rolled { animation: none; } }

/* ---------------------------------------------------------------- game shows: Mega Wheel and spin */
.dc-mwfig { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 12px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 28px; align-items: start; }
.dc-mwfig figcaption { grid-column: 1 / -1; }
.dc-mwfig-wheel .dc-svg { max-width: 340px; margin: 0 auto; }
.dc-mw-rim { fill: var(--ink); }
.dc-mw-seg { stroke: var(--paper); stroke-width: .8; }
.dc-mw-seg.is-a { fill: var(--paper-warm); }
.dc-mw-seg.is-b { fill: var(--ink); }
.dc-mw-seg.is-c { fill: var(--accent); }
.dc-mw-num { font: 600 13px var(--mono); }
.dc-mw-num.is-a { fill: var(--ink); }
.dc-mw-num.is-b, .dc-mw-num.is-c { fill: #fff; }
.dc-mw-hub { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.dc-mw-landed { font: 700 64px var(--serif); fill: var(--ink); }
.dc-mw-hubcap { font: 600 12px var(--mono); fill: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
.dc-mw-pointer { fill: var(--accent); stroke: var(--paper); stroke-width: 2; }
.dc-mwfig-result { margin: 0 0 12px !important; min-height: 4.5em; font-size: 15px; }
.dc-mwfig-tally { margin-top: 14px !important; font-size: 14px; }
.dc-mwfig-tally td, .dc-mwfig-tally th { padding: 6px 10px; }
.dc-mwfig-tally[hidden] { display: none; }
.dc-mwfig-tally caption { caption-side: top; text-align: left; padding: 0 0 6px; }
.dc-mwfig .dc-btn[aria-disabled="true"] { opacity: .5; cursor: progress; }

/* ---------------------------------------------------------------- Slingo: the card, its 12 lines, marking */
.dc-slingofig { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 12px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px 28px; align-items: start; }
.dc-slingofig figcaption { grid-column: 1 / -1; }
.dc-slingo-board { position: relative; width: 300px; aspect-ratio: 1; }
.dc-slingo-grid { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; height: 100%; border: 2px solid var(--ink); }
/* Every line runs through a square's centre and a diagonal through its corners, so the number
   sits on a small paper chip drawn above the lines. */
.dc-slingo-sq { border: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: var(--paper); font: 600 13px var(--mono); color: var(--ink-muted); padding: 4px; display: flex; align-items: flex-start; justify-content: flex-end; }
button.dc-slingo-sq { cursor: pointer; }
.dc-slingo-n { position: relative; z-index: 2; background: var(--paper); padding: 1px 4px; line-height: 1.2; }
.dc-slingo-sq[aria-pressed="true"] .dc-slingo-n { background: var(--accent-wash); }
.dc-slingo-sq:nth-child(5n) { border-right: 0; }
.dc-slingo-sq:nth-last-child(-n+5) { border-bottom: 0; }
.dc-slingo-sq.is-3 { color: var(--ink); }
.dc-slingo-sq.is-4 { color: var(--accent); font-size: 15px; }
.dc-slingo-sq[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent-dark); box-shadow: inset 0 0 0 3px var(--accent); }
.dc-slingo-sq:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.dc-slingo-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.dc-slingo-lines line { stroke: var(--ink-muted); stroke-width: .035; stroke-linecap: round; opacity: .55; }
.dc-slingo-lines line.is-through { stroke: var(--ink); stroke-width: .06; opacity: 1; }
.dc-slingo-lines line.is-done { stroke: var(--accent); stroke-width: .1; opacity: 1; }
.dc-slingo-why { margin: 0 0 10px !important; font-size: 15px; }
.dc-slingo-status { margin: 0 0 10px !important; font-size: 14px; color: var(--ink-soft); min-height: 3em; }
.dc-slingo-count { margin: 0 0 12px !important; font: 600 13px var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); }
.dc-slingo-count b { font: 700 40px/1 var(--serif); color: var(--ink); letter-spacing: 0; margin-right: 6px; }
.dc-slingo-count[hidden], .dc-slingofig [data-clear][hidden] { display: none; }

/* ---------------------------------------------------------------- tools: betting system simulator */
.dc-simtool { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 14px 0 12px; }
.dc-simtool-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 16px; align-items: end; }
.dc-simtool-form p { margin: 0; }
.dc-simtool-form p:first-child { grid-column: 1 / -1; }
.dc-simtool-form label { display: block; margin: 0 0 6px; font: 600 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-simtool-form input, .dc-simtool-form select { width: 100%; box-sizing: border-box; padding: 9px 10px; font: inherit; font-size: 15px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); }
.dc-simtool-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 0; border-top: 1px solid var(--rule); }
.dc-simtool-out div { padding: 10px 12px 12px 0; border-bottom: 1px solid var(--rule); }
.dc-simtool-out dt { font: 600 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-simtool-out dd { margin: 6px 0 0; font: 600 18px/1.2 var(--serif); font-variant-numeric: tabular-nums; }
.dc-simtool-out .is-kept dd { color: var(--accent); }
.dc-simtool [hidden] { display: none; }
.dc-simtool figcaption { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }

/* ---------------------------------------------------------------- Andar Bahar: a worked round */
/* Reuses the blackjack trainer's rows and cards, smaller, so a long round wraps. */
.dc-abround { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0 14px; }
.dc-abround .dc-bjtrain-row { align-items: flex-start; }
.dc-abround-cards { display: flex; flex-wrap: wrap; gap: 6px 6px; min-height: 64px; }
.dc-abround .dc-card { width: 36px; height: 50px; }
.dc-abround .dc-card b { font-size: 17px; }
.dc-abround .dc-card i { font-size: 14px; }
.dc-abcard { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.dc-abcard small { font: 600 12px/1 var(--mono); color: var(--ink-soft); }
.dc-abcard.is-match .dc-card { box-shadow: 0 0 0 3px var(--accent); }
.dc-abcard.is-match small { color: var(--accent); }
.dc-abround-hint { margin: 12px 0 0 !important; font-size: 14px; color: var(--ink-soft); }
.dc-abround-hint[hidden] { display: none; }
.dc-abround-status { margin: 14px 0 0 !important; font-size: 15px; min-height: 3em; }
.dc-abround-settle { margin: 8px 0 0 !important; font-size: 15px; }
.dc-abround-settle[hidden] { display: none; }
.dc-abround-settle li { margin-bottom: 4px; }
.dc-abround .dc-btn[aria-disabled="true"] { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------- roulette: tap a bet on the layout */
/* The numbers a bet covers are ringed (data-lit) and the rest dimmed. Without the script, the
   red bet the readout describes is shown the same way. */
.dc-layout[data-picking] .dc-cell:not([data-lit]) > :not(.dc-hit) { opacity: .32; }
.dc-layout .dc-cell[data-lit] .dc-face { stroke: #fff; stroke-width: 3; }
/* A picked area lightens, except a chip, which keeps its solid disc so its letter stays legible. */
.dc-layout [data-picked]:not(.dc-chip) > .dc-hit { fill: rgba(255, 255, 255, .2); }
.dc-layout[data-picking] .dc-chip:not([data-picked]) { opacity: .55; }
.dc-layout .dc-chip[data-picked] circle { stroke-dasharray: none; }
.dc-rbetfig.is-live [data-bet] { cursor: pointer; pointer-events: all; }
.dc-rbetfig.is-live [data-bet]:focus { outline: none; }
.dc-rbetfig.is-live [data-bet]:focus-visible > .dc-hit { stroke: #ffd23f; stroke-width: 4; stroke-dasharray: none; }
@media (prefers-reduced-motion: no-preference) { .dc-layout .dc-cell > *, .dc-layout .dc-chip { transition: opacity .15s; } }
.dc-rbet-how { margin: 0 0 10px !important; font-size: 15px; }
.dc-rbet-how[hidden] { display: none; }
.dc-rbet { margin-top: 14px; }
.dc-rbet-name { margin: 0 !important; font-size: 15px; }
.dc-rbet-name strong { font: 600 22px/1.2 var(--serif); margin-right: 8px; }
.dc-rbet-name span { color: var(--ink-muted); }
.dc-rbet-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; }
.dc-rbet-work { margin: 10px 0 0 !important; font-size: 14px; color: var(--ink-soft); }

/* ---------------------------------------------------------------- strategy: RTP spread table, session cost calculator */
.dc-spread { border-top: 2px solid var(--ink); padding-top: 12px; }
.dc-spread-n { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; padding: 0; border: 0; }
.dc-spread-n[hidden] { display: none; }
.dc-spread-n legend { float: left; margin-right: 10px; font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-spread-n label { position: relative; }
.dc-spread-n input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dc-spread-n label { display: inline-block; padding: 8px 12px; border: 1px solid var(--rule-strong); font: 600 13px/1 var(--mono); font-variant-numeric: tabular-nums; cursor: pointer; }
.dc-spread-n label:has(input:checked) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.dc-spread-n label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.dc-spread-tbl th[scope="row"] { font: 400 14px/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); background: none; }
.dc-tbl-wrap .dc-spread-tbl { min-width: 0; }
.dc-spread-tbl th.dc-r { white-space: normal; }
.dc-spread-tbl td[data-out$="-range"] { white-space: pre-line; }
.dc-spread-sub { display: block; margin-top: 3px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.dc-costcalc { border-top: 2px solid var(--ink); padding-top: 12px; }
.dc-costcalc-form { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 0; }
.dc-costcalc-form[hidden] { display: none; }
.dc-costcalc-form label { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; font: 600 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-muted); }
.dc-costcalc-form :is(select, input) { font: 400 15px/1.3 var(--sans); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 0; padding: 9px 10px; min-width: 0; text-transform: none; letter-spacing: 0; }
.dc-costcalc-form :is(select, input):focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dc-costcalc-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 860px) {
	.dc-foot-grid { grid-template-columns: 1fr 1fr; }
	.dc-foot-brand { grid-column: 1 / -1; }
	.dc-trust.has-toc { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.dc-index { grid-template-columns: minmax(0, 1fr); }
	.dc-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.dc-cost { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; }
	.dc-cost-track { grid-column: 1 / -1; grid-row: 2; }
	.dc-index-col, .dc-index-col:first-child, .dc-index-col:last-child { padding: 26px 0 8px; }
	.dc-index-col + .dc-index-col { border-left: 0; border-top: 1px solid var(--rule); }
	.dc-promises { grid-template-columns: minmax(0, 1fr); }
	.dc-toc { position: static; margin: -6px 0 8px; border-left: 0; padding-left: 0; }
	.dc-toc-h { margin: 0; padding: 4px 0 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; }
	.dc-toc-n { display: inline; margin-right: auto; margin-left: 6px; }
	.dc-toc-h::after { content: "Show"; font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--accent); }
	.dc-toc details[open] .dc-toc-h::after { content: "Hide"; }
	.dc-toc details[open] ol { padding-bottom: 12px; }
	.dc-index.is-solo .dc-topics { columns: 1; }
	.dc-bjkey { grid-template-columns: minmax(0, 1fr); }
	.dc-mwfig { grid-template-columns: minmax(0, 1fr); }
	.dc-slingofig { grid-template-columns: minmax(0, 1fr); }
	.dc-slingo-board { width: 100%; max-width: 320px; }
	.dc-crashchart-lab { font-size: 19px; }
	.dc-dicechart-n { font-size: 15px; }
	.dc-dicechart-lab, .dc-dicechart-range { font-size: 18px; }
	.dc-crashchart-axis { font-size: 19px; }
	.dc-bjchart { font-size: 11px; }
	.dc-bjchart th, .dc-bjchart td { min-width: 26px; height: 28px; }
	.dc-bjchart tbody th[scope="row"] { padding-right: 6px; font-size: 12px; }
	.dc-bjchart .dc-bjchart-corner { padding-right: 6px; }
	.dc-bjtrain-lab { width: 72px; }
	.dc-mast-in { flex-wrap: wrap; height: auto; padding-top: 14px; row-gap: 4px; }
	.dc-nav { width: 100%; gap: 18px; }
	.dc-nav a { padding: 8px 0 10px; }
}
@media (max-width: 640px) {
	.dc-costcalc-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dc-costcalc-form label:first-child { grid-column: 1 / -1; }
	:root { --gutter: 16px; }
	.dc-h1 { font-size: 30px; }
	.dc-row { grid-template-columns: minmax(0, 1fr); }
	.dc-index-num { font-size: 48px; }
	/* Wheel and buttons side by side, so Spin sits on the first screen (audit S12). */
	/* Wheel and buttons side by side only when the script has shown the buttons. */
	.dc-js .dc-sim { display: grid; grid-template-columns: 60vw minmax(0, 1fr); column-gap: 12px; align-items: center; }
	.dc-js .dc-sim-wheel { width: 60vw; max-width: none; margin: 0; }
	.dc-sim-controls { flex-direction: column; align-items: stretch; margin: 0; }
	.dc-sim-controls .dc-btn { padding: 12px 8px; text-align: center; line-height: 1.25; }
	.dc-sim-ledger, .dc-sim-last, .dc-sim figcaption { grid-column: 1 / -1; }
	.dc-sim-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dc-sim-ledger div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
	.dc-sim-ledger div:nth-child(4) { border-top: 1px solid var(--rule); }
	.dc-rbet-ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dc-rbet-ledger div:nth-child(3) { padding-left: 12px; border-left: 1px solid var(--rule); border-top: 0; }
	.dc-rbet-ledger dd { font-size: 18px; }
	.dc-tbl td, .dc-tbl th { padding: 10px 8px; }
	.dc-simtool-out { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.dc-logo img { height: 22px; }
}