/* ============================================================================
   learncrapsfree.com — shared stylesheet  ·  /styles.css
   ----------------------------------------------------------------------------
   BRAND: deliberately a clean, light, "textbook / encyclopedia" identity —
   a hard departure from its dark casino-style siblings so the properties never
   look like the same site:
     · crapsdojo.com  = near-black + jade/indigo  → we are NOT that
     · liveroll.live  = near-black + gold          → we are NOT that
     · livecrash.live = cyan                       → we are NOT that
   learncrapsfree = warm paper white, ink-navy serif headings, scholarly
   slate-blue accent, muted editorial teal/clay for bet-quality semantics.
   Education-first, beginner-clear, sports-native — NOT casino-cringe.
   ============================================================================ */

:root {
  /* ── Paper / surfaces (light, warm, textbook) ─────────── */
  --paper:      #fbfaf7;   /* page background — warm off-white */
  --paper-2:    #f4f2eb;   /* subtle band / alt rows */
  --card:       #ffffff;   /* raised card */
  --card-2:     #f7f5ef;   /* card header / inset */
  --rule:       #e3ded2;   /* hairline rules / borders */
  --rule-soft:  #ece8dd;

  /* ── Ink (text) ───────────────────────────────────────── */
  --ink:        #1c2433;   /* primary text — deep ink navy */
  --ink-2:      #3d4659;   /* body text */
  --ink-3:      #6b7385;   /* muted / captions */

  /* ── Accent: scholarly slate-blue (NOT jade/gold/cyan) ── */
  --accent:     #2f5d8a;   /* links, headings, primary */
  --accent-2:   #234a70;   /* hover / active */
  --accent-3:   #eaf1f8;   /* tint wash */
  --accent-line:#cdddec;

  /* ── Bet-quality semantics (muted, editorial) ─────────── */
  --good:       #1f7a5e;   /* smart bet — teal-green, not neon */
  --good-bg:    #e7f4ef;
  --good-line:  #bfe2d5;
  --ok:         #9a6a16;   /* marginal — ochre */
  --ok-bg:      #f6efdf;
  --ok-line:    #e6d5ad;
  --bad:        #b1442b;   /* skip / sucker — clay red */
  --bad-bg:     #fbeae5;
  --bad-line:   #f0cabd;

  /* ── Type ─────────────────────────────────────────────── */
  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Cambria, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  /* ── Shape / motion ───────────────────────────────────── */
  --r:          14px;
  --r-sm:       10px;
  --r-pill:     999px;
  --shadow:     0 1px 2px rgba(28,36,51,0.04), 0 6px 22px rgba(28,36,51,0.06);
  --shadow-sm:  0 1px 2px rgba(28,36,51,0.05);
  --t:          .18s;
  --ease:       cubic-bezier(.22,1,.36,1);

  --maxw:       820px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  background-image:
    radial-gradient(ellipse at 50% -8%, rgba(47,93,138,0.06), transparent 62%);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; transition: color var(--t) var(--ease); }
a:hover { color: var(--accent-2); }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); font-weight: 700; }
::selection { background: var(--accent-3); color: var(--accent-2); }

/* ── Skip link (a11y) ───────────────────────────────────── */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0; font-size: 14px; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

/* ── Top bar ────────────────────────────────────────────── */
.topbar {
  background: rgba(251,250,247,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 50;
}
.topbar .wrap {
  max-width: var(--maxw); margin: 0 auto;
  padding: 13px 22px;
  display: flex; align-items: center; gap: 14px;
}
.brand {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 19px; color: var(--ink); letter-spacing: -0.01em;
}
.brand .mark {
  font-family: var(--font-sans); font-weight: 800; font-size: 13px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; background: var(--accent);
  padding: 4px 8px; border-radius: 7px;
  align-self: center;
}
.brand b { color: var(--accent); font-weight: 700; }
.topbar .crumb {
  font-size: 12px; color: var(--ink-3);
  letter-spacing: 0.06em; font-weight: 600;
  border-left: 1px solid var(--rule); padding-left: 14px;
}
.topbar .spacer { flex: 1; }
.topbar .play-cta {
  padding: 9px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.topbar .play-cta:hover { background: var(--accent-2); color: #fff; transform: translateY(-1px); }
@media (max-width: 620px) {
  .topbar .crumb { display: none; }
}

/* ── Page shell ─────────────────────────────────────────── */
main { max-width: var(--maxw); margin: 0 auto; padding: 34px 22px 64px; }

/* ── Breadcrumb trail ───────────────────────────────────── */
.crumbs {
  font-size: 13px; color: var(--ink-3);
  margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 6px;
}
.crumbs a { color: var(--ink-3); border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }
.crumbs .sep { color: var(--rule); }
.crumbs .here { color: var(--ink-2); font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────── */
.hero { margin-bottom: 10px; }
.hero .kicker {
  font-family: var(--font-sans); font-size: 12px; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 14px;
}
.hero h1 {
  font-size: clamp(31px, 5.4vw, 50px);
  line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 16px;
}
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lede {
  font-size: 18px; color: var(--ink-2); line-height: 1.65;
  max-width: 660px; margin: 0;
}
.hero .lede b { color: var(--ink); font-weight: 700; }

/* ── Table of contents ──────────────────────────────────── */
.toc {
  margin: 30px 0 6px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}
.toc .toc-h {
  font-family: var(--font-sans); font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 12px;
}
.toc ol {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 7px 26px;
}
.toc ol li { font-size: 15px; }
.toc ol li a {
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft); padding-bottom: 1px;
}
.toc ol li a:hover { color: var(--accent); border-bottom-color: var(--accent-line); }

/* ── Sections ───────────────────────────────────────────── */
.section { margin-top: 46px; scroll-margin-top: 78px; }
.section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--rule); padding-bottom: 10px;
}
.section-head h2 {
  font-size: clamp(23px, 3.4vw, 31px); letter-spacing: -0.01em; margin: 0;
}
.section-head .sub {
  font-size: 14px; color: var(--ink-3); font-family: var(--font-sans);
}
.prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0 0 16px; }
.prose p:last-child { margin-bottom: 0; }
.prose b, .prose strong { color: var(--ink); font-weight: 700; }
.prose i, .prose em { font-style: italic; }
.prose .hl { color: var(--accent); font-weight: 700; }
.prose h3 {
  font-size: 20px; color: var(--ink); margin: 26px 0 9px;
}
.prose ul { margin: 0 0 16px; padding-left: 22px; }
.prose ul li { margin: 0 0 8px; }
.prose a { border-bottom: 1px solid var(--accent-line); }
.prose a:hover { border-bottom-color: var(--accent); }

/* ── Callout / explainer panel ──────────────────────────── */
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: var(--r);
  padding: 22px 24px;
  font-size: 16.5px; line-height: 1.72; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.panel p { margin: 0 0 13px; }
.panel p:last-child { margin-bottom: 0; }
.panel b { color: var(--ink); font-weight: 700; }
.panel .hl { color: var(--accent); font-weight: 700; }
.panel.good { border-left-color: var(--good); }
.panel.bad  { border-left-color: var(--bad); }

/* ── Numbered flow steps ────────────────────────────────── */
.steps { counter-reset: step; display: grid; gap: 13px; }
.step {
  display: flex; gap: 17px;
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 19px 22px; box-shadow: var(--shadow-sm);
}
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-3); color: var(--accent);
  border: 1px solid var(--accent-line);
  font-family: var(--font-sans); font-weight: 800; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.step .body { flex: 1; }
.step .body h3 { font-size: 18px; color: var(--ink); margin: 4px 0 7px; }
.step .body p { margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.step .body p b { color: var(--ink); }

/* ── Data tables ────────────────────────────────────────── */
.tbl-wrap {
  border: 1px solid var(--rule); border-radius: var(--r);
  overflow: hidden; background: var(--card); margin-top: 6px;
  box-shadow: var(--shadow-sm);
}
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 540px; }
table.tbl th, table.tbl td {
  padding: 13px 15px; text-align: left;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 14.5px;
}
table.tbl thead th {
  background: var(--card-2); color: var(--ink-3);
  font-family: var(--font-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap;
}
table.tbl tbody tr:hover { background: var(--paper-2); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl .bet-name { font-weight: 700; color: var(--ink); white-space: nowrap; }
table.tbl .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.edge {
  display: inline-block; min-width: 60px; text-align: center;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}
.edge-elite { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }
.edge-good  { background: var(--good-bg); color: var(--good); border: 1px solid var(--good-line); }
.edge-mid   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid var(--ok-line); }
.edge-bad   { background: var(--bad-bg);  color: var(--bad);  border: 1px solid var(--bad-line); }
.tag {
  display:inline-block; padding: 2px 10px; border-radius: var(--r-pill);
  font-family: var(--font-sans); font-weight: 800; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.tag-smart  { background: var(--good-bg); color: var(--good); }
.tag-ok     { background: var(--ok-bg);   color: var(--ok); }
.tag-skip   { background: var(--bad-bg);  color: var(--bad); }
.tbl-foot {
  padding: 13px 17px; font-size: 12.5px; color: var(--ink-3);
  background: var(--card-2); border-top: 1px solid var(--rule-soft);
  line-height: 1.55;
}

/* ── Dice-combination matrix (educational visual) ───────── */
.dice-grid {
  display: grid;
  grid-template-columns: auto repeat(6, 1fr);
  gap: 4px; margin: 6px 0 4px;
  font-family: var(--font-mono); font-size: 13px;
}
.dice-grid .dh {
  background: var(--accent); color: #fff;
  font-weight: 800; text-align: center;
  padding: 8px 0; border-radius: 6px; font-size: 12px;
}
.dice-grid .dr {
  background: var(--accent-3); color: var(--accent);
  font-weight: 800; text-align: center;
  padding: 8px 0; border-radius: 6px; font-size: 12px;
}
.dice-grid .dc {
  text-align: center; padding: 9px 0;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 6px; color: var(--ink-2); font-weight: 700;
}
.dice-grid .dc.seven { background: var(--bad-bg); color: var(--bad); border-color: var(--bad-line); }
.dice-grid .dc.hot   { background: var(--good-bg); color: var(--good); border-color: var(--good-line); }
.dice-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-3); margin-top: 12px;
}
.dice-legend span { display: inline-flex; align-items: center; gap: 7px; }
.dice-legend i { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }

/* ── Inline cross-link nudge (the cluster thread) ───────── */
.nudge {
  display: flex; align-items: center; gap: 17px;
  margin: 22px 0 4px; padding: 17px 21px;
  background: var(--accent-3);
  border: 1px solid var(--accent-line); border-radius: var(--r);
  color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.nudge:hover { border-color: var(--accent); transform: translateY(-1px); }
.nudge .ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 10px;
  background: #fff; border: 1px solid var(--accent-line);
  display: flex; align-items: center; justify-content: center; font-size: 21px;
}
.nudge .nb { flex: 1; }
.nudge .nb .t {
  font-family: var(--font-serif); font-weight: 700; font-size: 17px;
  color: var(--ink);
}
.nudge .nb .d { font-size: 13.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.nudge .go {
  flex: 0 0 auto; color: var(--accent);
  font-family: var(--font-sans); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}

/* ── "Related guides" cluster grid ──────────────────────── */
.related {
  margin-top: 50px;
  border-top: 2px solid var(--rule); padding-top: 26px;
}
.related h2 {
  font-size: 22px; margin: 0 0 16px;
}
.rel-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.rel-card {
  display: block; padding: 16px 18px;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-sm); color: inherit;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.rel-card:hover { border-color: var(--accent-line); transform: translateY(-1px); }
.rel-card .rt {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--accent); margin-bottom: 4px;
}
.rel-card .rd { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ── Glossary ───────────────────────────────────────────── */
.glossary {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm);
}
.glossary dl { margin: 0; }
.glossary .g-item { padding: 15px 19px; border-bottom: 1px solid var(--rule-soft); }
.glossary .g-item dt {
  font-family: var(--font-serif); font-weight: 700; font-size: 16px;
  color: var(--accent); margin-bottom: 5px;
}
.glossary .g-item dd { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq { display: grid; gap: 11px; }
.faq details {
  background: var(--card);
  border: 1px solid var(--rule); border-radius: var(--r);
  padding: 0 22px; box-shadow: var(--shadow-sm);
}
.faq details[open] { border-color: var(--accent-line); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 17px 0; font-family: var(--font-serif); font-weight: 700;
  font-size: 17px; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent); font-size: 23px; font-weight: 400;
  line-height: 1; flex: 0 0 auto;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .ans {
  padding: 0 0 19px; font-size: 15.5px; line-height: 1.72; color: var(--ink-2);
}
.faq .ans b { color: var(--ink); font-weight: 700; }
.faq .ans a { border-bottom: 1px solid var(--accent-line); }

/* ── CTA bridge (funnel → liveroll primary) ─────────────── */
.cta-bridge {
  margin-top: 54px;
  background: linear-gradient(180deg, #fff, var(--accent-3));
  border: 1px solid var(--accent-line);
  border-radius: var(--r);
  padding: 38px 30px; text-align: center;
  box-shadow: var(--shadow);
}
.cta-bridge h2 { font-size: clamp(23px, 4vw, 33px); margin: 0 0 13px; }
.cta-bridge h2 em { font-style: italic; color: var(--accent); }
.cta-bridge p {
  font-size: 16px; color: var(--ink-2); line-height: 1.65;
  max-width: 600px; margin: 0 auto 24px;
}
.cta-bridge p b { color: var(--ink); font-weight: 700; }
.cta-bridge .play {
  display: inline-block; padding: 16px 42px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff;
  font-family: var(--font-sans); font-weight: 800; font-size: 16px;
  letter-spacing: 0.02em;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
  box-shadow: 0 6px 18px rgba(47,93,138,0.28);
}
.cta-bridge .play:hover { background: var(--accent-2); color: #fff; transform: translateY(-1px); }
.cta-bridge .secondary {
  margin-top: 16px; font-size: 14px; color: var(--ink-3);
}
.cta-bridge .secondary a { color: var(--accent); font-weight: 700; border-bottom: 1px solid var(--accent-line); }
.cta-bridge .fineprint { margin-top: 15px; font-size: 12px; color: var(--ink-3); }

/* ── Footer ─────────────────────────────────────────────── */
.lcf-footer {
  margin-top: 46px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-3);
  display: flex; justify-content: center; align-items: center; gap: 18px;
  flex-wrap: wrap; text-align: center;
}
.lcf-footer a { color: var(--ink-3); }
.lcf-footer a:hover { color: var(--accent); }
.lcf-footer .meta { opacity: 0.8; width: 100%; margin-top: 6px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .toc ol { grid-template-columns: 1fr; }
  .glossary { grid-template-columns: 1fr; }
  .rel-grid { grid-template-columns: 1fr; }
  .nudge { flex-wrap: wrap; }
  .nudge .go { width: 100%; }
  main { padding: 26px 18px 56px; }
  .dice-grid { font-size: 11px; }
  .dice-grid .dh, .dice-grid .dr { font-size: 10px; padding: 6px 0; }
  .dice-grid .dc { padding: 7px 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}