/* ============================================================
   ScotGammon — site.css
   Vanilla CSS, sg- prefixed. Walnut / oxblood / brass wood dashboard.
   Self-hosted fonts + texture. No Tailwind, no CDN.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face {
  font-family: "Saira Condensed";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/saira-condensed-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Saira Condensed";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/saira-condensed-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Asap";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/asap-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Asap";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/asap-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Asap";
  font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/asap-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/spline-sans-mono-latin-700-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root {
  --sg-walnut: #2a1a10;
  --sg-walnut-grain: #2d1612;
  --sg-ink: #1a0d0a;
  --sg-oxblood: #4a0404;
  --sg-oxblood-soft: rgba(74, 4, 4, 0.55);
  --sg-parchment: #fdf6e3;
  --sg-brass: #d4af37;
  --sg-brass-hi: #f1c40f;
  --sg-text: #ece6dc;
  --sg-muted: #b6a892;
  --sg-faint: #8c7f6c;
  --sg-line: rgba(212, 175, 55, 0.22);
  --sg-line-soft: rgba(255, 255, 255, 0.06);
  --sg-display: "Saira Condensed", "Arial Narrow", system-ui, sans-serif;
  --sg-body: "Asap", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --sg-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sg-max: 1500px;
  --sg-shadow-inset: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sg-body);
  color: var(--sg-text);
  background-color: var(--sg-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Wood-grain shell (real self-hosted texture over walnut) */
.sg-shell {
  min-height: 100vh;
  background-color: var(--sg-walnut);
  background-image: url("/assets/textures/dark-wood.png");
}

.sg-wrap { max-width: var(--sg-max); margin: 0 auto; padding: 0 1.25rem; }

/* Display headings */
h1, h2, h3, .sg-display {
  font-family: var(--sg-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
}
.sg-mono { font-family: var(--sg-mono); }
.sg-eyebrow {
  font-family: var(--sg-display);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--sg-brass);
}

/* ---------- Header ---------- */
.sg-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sg-walnut-grain);
  box-shadow: var(--sg-shadow-inset), 0 6px 18px rgba(0, 0, 0, 0.4);
  border-bottom: 1px solid var(--sg-line);
}
.sg-header__inner {
  max-width: var(--sg-max); margin: 0 auto; padding: 0 1.25rem;
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sg-brand { display: flex; align-items: center; gap: 0.6rem; }
.sg-brand svg { width: 30px; height: 30px; }
.sg-brand__word {
  font-family: var(--sg-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.16em; color: var(--sg-brass); text-transform: uppercase;
}
.sg-nav { display: flex; align-items: center; gap: 1.35rem; }
.sg-nav a {
  font-family: var(--sg-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sg-text);
  padding: 2px 0; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.sg-nav a:hover, .sg-nav a[aria-current="page"] { color: var(--sg-brass); border-bottom-color: var(--sg-brass); }
.sg-cta {
  font-family: var(--sg-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.06em;
  text-transform: uppercase; background: var(--sg-brass); color: var(--sg-ink);
  padding: 0.4rem 0.9rem; border: 0; cursor: pointer; transition: background .15s;
}
.sg-cta:hover { background: var(--sg-brass-hi); }
.sg-menu-btn { display: none; background: none; border: 1px solid var(--sg-line); color: var(--sg-brass);
  font-size: 1.4rem; line-height: 1; padding: 0.2rem 0.5rem; cursor: pointer; }

/* ---------- Panels / cards ---------- */
.sg-panel {
  background: var(--sg-oxblood-soft);
  border: 1px solid var(--sg-line-soft);
  padding: 1rem; border-radius: 2px;
}
.sg-panel--grain { background: var(--sg-walnut-grain); box-shadow: var(--sg-shadow-inset); border: 1px solid var(--sg-line); }
.sg-panel__title {
  font-family: var(--sg-display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  font-size: 0.82rem; color: var(--sg-muted); margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--sg-line); padding-bottom: 0.4rem;
}
.sg-panel--grain .sg-panel__title { color: var(--sg-brass); }

/* ---------- Buttons ---------- */
.sg-btn {
  display: inline-block; font-family: var(--sg-display); font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; text-align: center; cursor: pointer; border: 2px solid transparent;
  padding: 0.7rem 1.25rem; font-size: 1.15rem; transition: filter .15s, background .15s, color .15s;
}
.sg-btn--primary { background: var(--sg-brass); color: var(--sg-ink); }
.sg-btn--primary:hover { filter: brightness(1.1); }
.sg-btn--ghost { border-color: var(--sg-brass); color: var(--sg-brass); background: transparent; }
.sg-btn--ghost:hover { background: rgba(212, 175, 55, 0.1); }
.sg-btn--block { display: block; width: 100%; }

/* ---------- Homepage dashboard grid ---------- */
.sg-arena { padding: 1.5rem 0; }
.sg-arena__grid { display: grid; grid-template-columns: 230px 1fr 230px; gap: 1.25rem; align-items: stretch; }
.sg-rail { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }

/* center column */
.sg-stage__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--sg-line); padding: 0.5rem 0.85rem; margin-bottom: 1rem;
}
.sg-stage__bar h1 { font-size: 1.9rem; }
.sg-stage__bar p { font-family: var(--sg-mono); font-size: 0.72rem; color: var(--sg-muted); text-transform: uppercase; letter-spacing: .03em; }

.sg-boardbox {
  background: var(--sg-walnut);
  border: 2px solid var(--sg-line); padding: 1rem; border-radius: 2px;
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.18);
}
.sg-boardbox__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.sg-pip { font-family: var(--sg-mono); font-weight: 700; font-size: 0.85rem; padding: 0.2rem 0.6rem; }
.sg-pip--white { background: var(--sg-brass); color: var(--sg-ink); }
.sg-pip--dark { background: #5c2a1e; color: #fff; }
.sg-turn { font-family: var(--sg-mono); font-size: 0.7rem; text-transform: uppercase; color: var(--sg-brass); letter-spacing: .08em; }

/* the decorative board */
.sg-board {
  aspect-ratio: 16 / 9; width: 100%; position: relative;
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0.5rem;
  background: var(--sg-walnut-grain); box-shadow: var(--sg-shadow-inset);
  padding: 0.9rem; border: 2px solid rgba(120, 90, 60, 0.45);
}
.sg-board__bar { background: rgba(26, 13, 10, 0.92); border-left: 1px solid var(--sg-line-soft); border-right: 1px solid var(--sg-line-soft);
  display: flex; align-items: center; justify-content: center; }
.sg-cube { width: 40px; height: 40px; background: var(--sg-oxblood); border: 2px solid var(--sg-brass); color: var(--sg-brass);
  font-family: var(--sg-display); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
.sg-quad { position: relative; }
.sg-points { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); }
.sg-point { height: 50%; }
.sg-point--down { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.sg-point--up { clip-path: polygon(50% 0, 0 100%, 100% 100%); align-self: end; }
.sg-point--brass { background: rgba(212, 175, 55, 0.20); }
.sg-point--ox { background: rgba(74, 4, 4, 0.5); }
.sg-checker { width: 30px; height: 30px; border-radius: 50%; background: var(--sg-parchment); box-shadow: 0 3px 6px rgba(0,0,0,.5); margin: 0.4rem auto 0; position: relative; z-index: 2; }

.sg-stage__actions { display: flex; gap: 1rem; margin-top: 1rem; }
.sg-stage__actions .sg-btn { flex: 1; }

/* rail list items */
.sg-list { display: flex; flex-direction: column; gap: 0.4rem; }
.sg-list a { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sg-mono); font-size: 0.78rem; padding: 0.5rem 0.6rem; background: rgba(26, 13, 10, 0.35);
  border-left: 2px solid transparent; transition: background .15s, border-color .15s; }
.sg-list a:hover { background: rgba(212, 175, 55, 0.08); border-left-color: var(--sg-brass); }
.sg-list a .sg-tag { color: var(--sg-brass); }

.sg-variants { display: grid; gap: 0.4rem; }
.sg-variants a { font-family: var(--sg-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: 0.92rem; padding: 0.45rem 0.6rem; background: rgba(26, 13, 10, 0.35); transition: background .15s; }
.sg-variants a:hover { background: rgba(212, 175, 55, 0.08); }
.sg-variants a.is-feature { background: var(--sg-brass); color: var(--sg-ink); }

.sg-feature { display: block; border-bottom: 1px solid var(--sg-line-soft); padding-bottom: 0.6rem; margin-bottom: 0.6rem; }
.sg-feature:last-child { border-bottom: 0; margin-bottom: 0; }
.sg-feature .sg-kicker { font-size: 0.62rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sg-faint); font-weight: 700; }
.sg-feature .sg-head { font-family: var(--sg-display); font-weight: 600; font-size: 0.98rem; line-height: 1.15; }
.sg-feature:hover .sg-head { color: var(--sg-brass); }

/* ---------- Puzzle band ---------- */
.sg-puzzle { padding: 3rem 0; background: rgba(0, 0, 0, 0.4); border-top: 1px solid var(--sg-line-soft); border-bottom: 1px solid var(--sg-line-soft); }
.sg-puzzle__in { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 1.25rem; }
.sg-puzzle__date { display: inline-block; font-family: var(--sg-mono); font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sg-brass); border-bottom: 2px solid var(--sg-brass); padding-bottom: 2px; margin-bottom: 1rem; }
.sg-puzzle h2 { font-size: 3rem; margin-bottom: 0.75rem; }
.sg-puzzle p { color: var(--sg-muted); margin-bottom: 1.5rem; }
.sg-puzzle__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ---------- Stat strip (honest, real numbers) ---------- */
.sg-stats { padding: 2.5rem 0; }
.sg-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.sg-stat { border-left: 1px solid var(--sg-line); padding-left: 1.1rem; }
.sg-stat__num { font-family: var(--sg-display); font-weight: 700; font-size: 2.4rem; color: var(--sg-brass); }
.sg-stat__lab { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--sg-faint); }

/* ---------- Scene teaser ---------- */
.sg-scene { padding: 1rem 0 3rem; }
.sg-scene__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.sg-scene__card { padding: 1.5rem; border: 1px solid var(--sg-line); background: rgba(26,13,10,.35); }
.sg-scene__card h3 { font-size: 1.5rem; color: var(--sg-brass); margin-bottom: 0.5rem; }
.sg-scene__card p { color: var(--sg-muted); margin-bottom: 1rem; }

/* ---------- Footer ---------- */
.sg-footer { background: var(--sg-walnut-grain); box-shadow: var(--sg-shadow-inset); border-top: 1px solid var(--sg-line); padding: 3rem 0; }
.sg-footer__top { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.sg-footer__brand { display: flex; align-items: center; gap: 0.6rem; }
.sg-footer__brand svg { width: 28px; height: 28px; }
.sg-footer__brand span { font-family: var(--sg-display); font-size: 1.4rem; letter-spacing: .16em; color: var(--sg-brass); text-transform: uppercase; }
.sg-footer__nav { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.sg-footer__nav a { font-family: var(--sg-display); font-size: 0.85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--sg-muted); }
.sg-footer__nav a:hover { color: var(--sg-text); }
.sg-footer__copy { text-align: center; margin-top: 2rem; font-family: var(--sg-mono); font-size: 0.66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sg-faint); }

/* ---------- Responsive ---------- */
/* ---------- Content pages (players / tournaments / clubs) ---------- */
.sg-page { padding: 2.5rem 0 3.5rem; }
.sg-narrow { max-width: 820px; }
.sg-page__head { margin-bottom: 2rem; }
.sg-page__head h1 { font-size: 2.8rem; margin: 0.3rem 0 0.6rem; }
.sg-page__head .sg-nick { font-style: italic; color: var(--sg-brass); }
.sg-lede { color: var(--sg-muted); font-size: 1.1rem; max-width: 70ch; }
.sg-crumbs { font-family: var(--sg-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--sg-faint); margin-bottom: 1rem; }
.sg-crumbs a:hover { color: var(--sg-brass); }
.sg-mt { margin-top: 1.5rem; }
.sg-muted-p { color: var(--sg-muted); }

.sg-block { margin-top: 2.5rem; }
.sg-block__title { font-family: var(--sg-display); font-weight: 700; letter-spacing: .04em; font-size: 1.5rem; color: var(--sg-brass); margin-bottom: 1rem; border-bottom: 1px solid var(--sg-line); padding-bottom: 0.4rem; }

.sg-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.sg-card { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.1rem; background: rgba(26,13,10,.4); border: 1px solid var(--sg-line-soft); border-left: 3px solid var(--sg-line); transition: border-color .15s, background .15s; }
.sg-card:hover { border-left-color: var(--sg-brass); background: rgba(212,175,55,.06); }
.sg-card__kicker { font-family: var(--sg-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sg-faint); }
.sg-card__name { font-family: var(--sg-display); font-weight: 700; font-size: 1.25rem; color: var(--sg-text); }
.sg-card__name em { font-style: italic; color: var(--sg-brass); font-size: 0.95rem; }
.sg-card__sum { color: var(--sg-muted); font-size: 0.9rem; }

.sg-prose { font-size: 1.08rem; max-width: 70ch; }
.sg-prose p { margin-bottom: 1rem; }
.sg-ticks { display: flex; flex-direction: column; gap: 0.4rem; }
.sg-ticks li { position: relative; padding-left: 1.3rem; color: var(--sg-text); }
.sg-ticks li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; background: var(--sg-brass); transform: rotate(45deg); }
.sg-sources { margin-top: 2rem; }
.sg-sources ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.sg-sources a { color: var(--sg-brass); font-size: 0.9rem; text-decoration: underline; text-underline-offset: 3px; }

/* feature cards (tournaments) */
.sg-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1rem; }
.sg-feature-card { padding: 1.5rem; border: 1px solid var(--sg-line); background: var(--sg-walnut-grain); box-shadow: var(--sg-shadow-inset); }
.sg-feature-card h2 { font-size: 1.9rem; color: var(--sg-text); margin: 0.3rem 0 0.5rem; }
.sg-feature-card--scot { border-color: var(--sg-brass); }
.sg-feature-card--scot h2 { color: var(--sg-brass); }

/* tables */
.sg-tablewrap { overflow-x: auto; border: 1px solid var(--sg-line-soft); }
.sg-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 520px; }
.sg-table thead th { text-align: left; font-family: var(--sg-display); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 0.78rem; color: var(--sg-brass); background: rgba(26,13,10,.55); padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--sg-line); }
.sg-table td { padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--sg-line-soft); vertical-align: top; }
.sg-table tbody tr:hover { background: rgba(212,175,55,.05); }
.sg-table .sg-muted-td { color: var(--sg-muted); }
.sg-table tr.is-scot { background: rgba(212,175,55,.07); }
.sg-table tr.is-world td:first-child { border-left: 3px solid var(--sg-brass); }
.sg-badge { display: inline-block; font-family: var(--sg-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border: 1px solid var(--sg-line); color: var(--sg-muted); vertical-align: middle; }
.sg-badge--scot { border-color: var(--sg-brass); color: var(--sg-brass); }
.sg-foot-note { color: var(--sg-faint); font-size: 0.82rem; margin-top: 0.75rem; }

/* article: byline, hero, figures, faq, author, guides */
.sg-byline { font-family: var(--sg-mono); font-size: 0.78rem; color: var(--sg-faint); text-transform: uppercase; letter-spacing: .06em; margin-top: 0.5rem; }
.sg-hero { display: block; margin: 0 0 2rem; border: 1px solid var(--sg-line); }
.sg-hero img { width: 100%; height: auto; display: block; }
.sg-prose h2 { font-family: var(--sg-display); font-weight: 700; font-size: 1.7rem; color: var(--sg-brass); letter-spacing: .03em; margin: 2rem 0 0.75rem; }
.sg-prose a { color: var(--sg-brass); text-decoration: underline; text-underline-offset: 2px; }
.sg-prose a:hover { color: var(--sg-brass-hi); }
.sg-prose ul.sg-ticks { margin: 1rem 0; }
.sg-figure { margin: 1.75rem 0; border: 1px solid var(--sg-line); background: rgba(26,13,10,.4); padding: 1rem; }
.sg-svg { width: 100%; height: auto; display: block; }
.sg-figure figcaption { font-size: 0.82rem; color: var(--sg-muted); margin-top: 0.6rem; text-align: center; }

.sg-faq { margin-top: 2.5rem; }
.sg-qa { border: 1px solid var(--sg-line-soft); border-left: 3px solid var(--sg-line); margin-bottom: 0.5rem; background: rgba(26,13,10,.35); }
.sg-qa > summary { cursor: pointer; padding: 0.85rem 1rem; font-family: var(--sg-display); font-weight: 600; font-size: 1.08rem; letter-spacing: .02em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.sg-qa > summary::-webkit-details-marker { display: none; }
/* FAQ question headings sit inside <summary>; keep the summary's look. */
.sg-qa > summary > .sg-qa__q { margin: 0; font: inherit; letter-spacing: inherit; color: inherit; }
.sg-qa > summary::after { content: "+"; color: var(--sg-brass); font-family: var(--sg-mono); }
.sg-qa[open] > summary::after { content: "\2212"; }
.sg-qa[open] > summary { color: var(--sg-brass); border-bottom: 1px solid var(--sg-line-soft); }
.sg-qa__a { padding: 0.85rem 1rem; color: var(--sg-muted); }

.sg-author { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.25rem; border: 1px solid var(--sg-line); background: var(--sg-walnut-grain); box-shadow: var(--sg-shadow-inset); }
.sg-author__pic img { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--sg-brass); object-fit: cover; }
.sg-author__name { font-family: var(--sg-display); font-weight: 700; font-size: 1.2rem; margin: 0.2rem 0; }
.sg-author__name span { font-family: var(--sg-body); font-weight: 400; font-size: 0.85rem; color: var(--sg-muted); }
.sg-author__bio { color: var(--sg-muted); font-size: 0.92rem; margin-bottom: 0.6rem; }
.sg-author__creds { display: flex; flex-direction: column; gap: 0.25rem; }
.sg-author__creds li { position: relative; padding-left: 1.1rem; font-size: 0.82rem; color: var(--sg-faint); }
.sg-author__creds li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--sg-brass); transform: rotate(45deg); }

.sg-guides { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
@media (min-width: 920px) { .sg-guides--4 { grid-template-columns: repeat(4, 1fr); } }
.sg-guide { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem; background: rgba(26,13,10,.4); border: 1px solid var(--sg-line-soft); border-top: 3px solid var(--sg-brass); transition: background .15s, transform .1s; }
.sg-guide:hover { background: rgba(212,175,55,.07); transform: translateY(-2px); }
.sg-guide__kicker { font-family: var(--sg-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sg-faint); }
.sg-guide__title { font-family: var(--sg-display); font-weight: 700; font-size: 1.4rem; color: var(--sg-text); }
.sg-guide__sum { color: var(--sg-muted); font-size: 0.92rem; }

@media (max-width: 600px) { .sg-author { flex-direction: column; } }

/* clubs map + directory */
.sg-scotnote { border: 1px solid var(--sg-brass); border-left-width: 4px; background: rgba(212,175,55,.06); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.sg-scotnote p { color: var(--sg-text); margin-top: 0.25rem; }
.sg-scotnote a { color: var(--sg-brass); text-decoration: underline; text-underline-offset: 3px; }
.sg-map { height: 460px; width: 100%; background: var(--sg-walnut-grain); border: 1px solid var(--sg-line); }
.sg-map__fallback { padding: 1.5rem; color: var(--sg-muted); font-size: 0.9rem; }
.leaflet-container { background: #2d2218; }
.leaflet-popup-content { font-family: var(--sg-body); }
.sg-count { font-family: var(--sg-mono); font-size: 0.8rem; color: var(--sg-faint); letter-spacing: 0; text-transform: none; }
.sg-region { font-family: var(--sg-display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem; color: var(--sg-muted); margin: 1.25rem 0 0.6rem; }
.sg-clublist { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.75rem; }
.sg-club { padding: 0.85rem 1rem; background: rgba(26,13,10,.4); border: 1px solid var(--sg-line-soft); border-left: 3px solid var(--sg-line); }
.sg-club.is-dormant, .sg-club.is-uncertain { opacity: 0.7; border-left-color: var(--sg-faint); }
.sg-club__head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sg-club__name { font-family: var(--sg-display); font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; }
.sg-club__meta { color: var(--sg-muted); font-size: 0.85rem; margin-top: 0.2rem; }
.sg-club__links { margin-top: 0.4rem; font-size: 0.8rem; display: flex; gap: 0.85rem; flex-wrap: wrap; align-items: center; }
.sg-club__links a { color: var(--sg-brass); text-decoration: underline; text-underline-offset: 2px; }
.sg-club__contact { font-family: var(--sg-mono); color: var(--sg-faint); font-size: 0.72rem; word-break: break-all; }

@media (max-width: 760px) {
  .sg-feature-row { grid-template-columns: 1fr; }
  .sg-page__head h1 { font-size: 2.1rem; }
  .sg-map { height: 360px; }
}

/* ---------- Daily puzzle ---------- */
.pz { margin: 1.5rem 0; }
.pz-date { font-family: var(--sg-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sg-faint); margin: 0 0 .4rem; }
.pz-prompt { font-family: var(--sg-display); font-size: 1.3rem; line-height: 1.3; color: var(--sg-text); margin: 0 0 1rem; }
.pz .pb-board { max-width: 560px; margin: 1rem auto 0; }
.pz-dice { justify-content: center; margin-top: .7rem; }
.pz-reveal { margin-top: 1.2rem; }
.pz-list { margin: 1rem 0 1.5rem; }
.pz-list .sg-qa { margin-bottom: .5rem; }
.pz-options { display: flex; flex-direction: column; gap: .5rem; margin: 1.2rem 0; }
.pz-option { text-align: left; padding: .8rem 1rem; font-family: var(--sg-body); font-size: .98rem; background: var(--sg-walnut-grain); color: var(--sg-text); border: 1px solid var(--sg-line); border-radius: 8px; cursor: pointer; transition: border-color .12s, background .12s; }
.pz-option:hover { border-color: var(--sg-brass); }
.pz-options.is-done .pz-option { cursor: default; }
.pz-option.is-right { border-color: #7bbf6a; background: rgba(123,191,106,.14); color: #d6eccd; }
.pz-option.is-chosen-wrong { border-color: #d98c8c; background: rgba(217,140,140,.14); color: #f0cccc; }
.pz-reveal-box { border-radius: 10px; padding: 1.1rem; margin: 1.2rem 0; border: 1px solid var(--sg-line); background: var(--sg-walnut-grain); }
.pz-reveal-box.is-correct { border-color: rgba(123,191,106,.5); }
.pz-reveal-box.is-wrong { border-color: rgba(217,140,140,.5); }
.pz-verdict { font-family: var(--sg-display); font-size: 1.3rem; margin: 0 0 .5rem; }
.is-correct .pz-verdict { color: #7bbf6a; }
.is-wrong .pz-verdict { color: #d98c8c; }
.pz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.2rem 0; }
.pz-stat { text-align: center; background: var(--sg-walnut-grain); border: 1px solid var(--sg-line); border-radius: 8px; padding: .6rem .2rem; }
.pz-stat__n { display: block; font-family: var(--sg-display); font-size: 1.5rem; color: var(--sg-brass); }
.pz-stat__l { display: block; font-family: var(--sg-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sg-faint); }
.pz-countdown { font-family: var(--sg-mono); font-size: .85rem; color: var(--sg-muted); text-align: center; margin: .6rem 0 0; }
.pz-share { margin-top: 1rem; }
.pz-share__msg { font-size: .85rem; color: #7bbf6a; margin-left: .5rem; }

/* ---------- Playable board (pass-and-play / vs computer) ---------- */
.pb { display: flex; justify-content: center; align-items: flex-start; gap: 1.5rem; margin: 1.5rem 0; }
.pb-board { flex: 0 1 600px; max-width: 600px; }

/* side panel — always visible beside the board, so no scrolling after a move */
.pb-side { flex: 0 0 200px; display: flex; flex-direction: column; gap: .9rem; position: sticky; top: 1rem; }
.pb-modes { display: flex; border: 1px solid var(--sg-line); border-radius: 8px; overflow: hidden; }
.pb-modes button { flex: 1; padding: .5rem .3rem; font-family: var(--sg-display); letter-spacing: .02em; font-size: .82rem; background: var(--sg-walnut-grain); color: var(--sg-muted); border: 0; cursor: pointer; }
.pb-modes button + button { border-left: 1px solid var(--sg-line); }
.pb-modes button.is-on { background: var(--sg-oxblood); color: var(--sg-parchment); }
.pb-status { font-family: var(--sg-display); letter-spacing: .02em; font-size: 1.05rem; line-height: 1.3; color: var(--sg-text); margin: 0; min-height: 2.6em; }

/* dice cup roll control */
/* 3D leather dice cup, with the label on the cup body */
.pb-cup { position: relative; display: block; width: 124px; margin: 0 auto; padding: 0; background: none; border: 0; cursor: pointer; transition: transform .12s; }
.pb-cup:disabled { opacity: .5; cursor: default; }
.pb-cup:hover.is-ready { transform: translateY(-2px); }
.pb-cup__cup {
  position: relative; display: block; width: 90px; height: 110px; margin: 0 auto;
  /* dark leather dice cup — a near-cylinder, slight taper, not a glass */
  background: linear-gradient(90deg, #160b05 0%, #3a2414 20%, #5b3a22 50%, #3a2414 80%, #160b05 100%);
  clip-path: polygon(3% 7%, 97% 7%, 89% 100%, 11% 100%);
  box-shadow: inset 0 -16px 22px rgba(0,0,0,.6), inset 0 8px 12px rgba(0,0,0,.35), 0 6px 12px rgba(0,0,0,.5);
}
.pb-cup.is-ready .pb-cup__cup { filter: brightness(1.12); }
.pb-cup__cup::before { /* the brass-rimmed mouth of the cup, dark inside */
  content: ""; position: absolute; top: -7px; left: 1%; right: 1%; height: 26px;
  background: radial-gradient(ellipse at 50% 58%, #0d0603 0%, #241409 72%);
  border: 3px solid var(--sg-brass); border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.55), inset 0 -3px 6px rgba(0,0,0,.7);
}
.pb-cup__cup::after { /* a faint leather seam */
  content: ""; position: absolute; top: 22px; bottom: 6px; left: 50%; width: 1px;
  background: rgba(0,0,0,.35);
}
.sg-headlink { font-family: var(--sg-mono); font-size: .7rem; color: var(--sg-brass); text-decoration: underline; text-underline-offset: 2px; }
.sg-clubsearch { margin: 1.25rem 0; }
.sg-clubsearch input { width: 100%; max-width: 440px; padding: .65rem .85rem; font-family: var(--sg-body); font-size: 1rem; background: var(--sg-walnut-grain); color: var(--sg-text); border: 1px solid var(--sg-line); border-radius: 8px; }
.sg-clubsearch input:focus { outline: none; border-color: var(--sg-brass); }
.sg-clubsearch__count { font-family: var(--sg-mono); font-size: .8rem; color: var(--sg-muted); margin: .45rem 0 0; }
.pb-cup__txt {
  position: absolute; left: 0; right: 0; top: 54%; transform: translateY(-50%);
  text-align: center; font-family: var(--sg-display); text-transform: uppercase;
  letter-spacing: .08em; font-size: .98rem; line-height: 1.05;
  color: var(--sg-brass); text-shadow: 0 1px 2px rgba(0,0,0,.75); pointer-events: none;
}
.pb-off { font-family: var(--sg-mono); font-size: .78rem; color: var(--sg-muted); margin: 0; }
.pb-off strong { color: var(--sg-text); }

.pb-board {
  position: relative; display: flex; gap: 0; padding: 0; aspect-ratio: 12 / 9;
  background: var(--pb-felt); border: 7px solid var(--pb-frame); border-radius: 8px;
  box-shadow: var(--sg-shadow-inset); overflow: hidden;
  /* default theme: Walnut */
  --pb-felt: #2a1a10; --pb-frame: #1c0f0a;
  --pb-pt-a: #4a0404; --pb-pt-b: #c9b896;
  --pb-w1: #fffdf6; --pb-w2: #e6dcc4; --pb-w-edge: #b8a888;
  --pb-b1: #3a2418; --pb-b2: #140a06; --pb-b-edge: #d4af37;
  --pb-bar1: #0f0805; --pb-bar2: #2c1a10; --pb-rail: #1a0d0a;
}
.pb-board[data-theme="slate"] { --pb-felt:#1f2933; --pb-frame:#0e151c; --pb-pt-a:#3b4a5a; --pb-pt-b:#cfd8e3; --pb-w1:#ffffff; --pb-w2:#d7dde6; --pb-w-edge:#9aa6b4; --pb-b1:#3a4654; --pb-b2:#11171f; --pb-b-edge:#8fa3b8; --pb-bar1:#0c1218; --pb-bar2:#263240; --pb-rail:#0e151c; }
.pb-board[data-theme="forest"] { --pb-felt:#14331f; --pb-frame:#0a1c11; --pb-pt-a:#0e5a32; --pb-pt-b:#e8dcc0; --pb-w1:#fffdf5; --pb-w2:#e8dcc0; --pb-w-edge:#b8a87f; --pb-b1:#3a2a16; --pb-b2:#160d04; --pb-b-edge:#d9b44a; --pb-bar1:#08160d; --pb-bar2:#1c3a26; --pb-rail:#0a1c11; }
.pb-board[data-theme="midnight"] { --pb-felt:#15151c; --pb-frame:#0a0a10; --pb-pt-a:#c8a24a; --pb-pt-b:#efe6d0; --pb-w1:#fff8e8; --pb-w2:#efe2c4; --pb-w-edge:#c8a24a; --pb-b1:#2a2a36; --pb-b2:#0c0c12; --pb-b-edge:#c8a24a; --pb-bar1:#0a0a10; --pb-bar2:#20202c; --pb-rail:#0a0a10; }
.pb-board[data-theme="sand"] { --pb-felt:#e9dcc2; --pb-frame:#b89b6a; --pb-pt-a:#b5532e; --pb-pt-b:#fff7e6; --pb-w1:#fffaf0; --pb-w2:#ece0c8; --pb-w-edge:#c9a26a; --pb-b1:#5a3a1e; --pb-b2:#2a1810; --pb-b-edge:#8a5a2e; --pb-bar1:#d2bd92; --pb-bar2:#c2a877; --pb-rail:#cdb888; }
.pb-board[data-theme="ocean"] { --pb-felt:#0f3b40; --pb-frame:#082529; --pb-pt-a:#1c3a5e; --pb-pt-b:#e4d8b8; --pb-w1:#fffdf3; --pb-w2:#e4d8b8; --pb-w-edge:#b9a06e; --pb-b1:#163a52; --pb-b2:#08161f; --pb-b-edge:#d98c6a; --pb-bar1:#06181b; --pb-bar2:#14464c; --pb-rail:#082529; }
.pb-board[data-theme="crimson"] { --pb-felt:#3a0d14; --pb-frame:#220609; --pb-pt-a:#c96b76; --pb-pt-b:#e8c87a; --pb-w1:#fff4e8; --pb-w2:#f0dcc4; --pb-w-edge:#d4af37; --pb-b1:#5a1018; --pb-b2:#2a060a; --pb-b-edge:#d4af37; --pb-bar1:#1e0508; --pb-bar2:#4a1018; --pb-rail:#220609; }
.pb-themes { display: flex; flex-direction: column; gap: .55rem; flex: 0 0 auto; }
.pb-theme-btn { width: 38px; height: 38px; border-radius: 8px; border: 2px solid var(--sg-line); cursor: pointer; padding: 0; overflow: hidden; background: none; transition: border-color .12s; }
.pb-theme-btn.is-on { border-color: var(--sg-brass); box-shadow: 0 0 0 2px rgba(212,175,55,.4); }
.pb-sw { display: block; width: 100%; height: 100%; }
.pb-sw--walnut { background: linear-gradient(135deg, #4a0404 0 38%, #c9b896 38% 62%, #2a1a10 62%); }
.pb-sw--slate { background: linear-gradient(135deg, #3b4a5a 0 38%, #cfd8e3 38% 62%, #1f2933 62%); }
.pb-sw--forest { background: linear-gradient(135deg, #0e5a32 0 38%, #e8dcc0 38% 62%, #14331f 62%); }
.pb-sw--midnight { background: linear-gradient(135deg, #c8a24a 0 38%, #efe6d0 38% 62%, #15151c 62%); }
.pb-sw--sand { background: linear-gradient(135deg, #b5532e 0 38%, #fff7e6 38% 62%, #e9dcc2 62%); }
.pb-sw--ocean { background: linear-gradient(135deg, #1c3a5e 0 38%, #e4d8b8 38% 62%, #0f3b40 62%); }
.pb-sw--crimson { background: linear-gradient(135deg, #c96b76 0 38%, #e8c87a 38% 62%, #3a0d14 62%); }

/* depth + effects */
.pb-board::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 55px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.45); border-radius: 4px; }
.pb-point::before { box-shadow: inset 0 0 6px rgba(0,0,0,.25); }
@keyframes pb-target { 0%, 100% { background: rgba(212,175,55,.12); } 50% { background: rgba(212,175,55,.30); } }
.pb-point.is-target { animation: pb-target 1.2s ease-in-out infinite; }
.pb-tray.is-target { animation: pb-target 1.2s ease-in-out infinite; }
.pb-point.is-sel { box-shadow: inset 0 0 14px rgba(241,196,15,.4); }
.pb-chk, .pb-die3 { will-change: transform; }
/* pick-up lift on the grabbed checker */
@keyframes pb-lift { from { transform: translateY(0) scale(1); } to { transform: translateY(-7px) scale(1.08); } }
.pb-point.is-sel .pb-chk:last-child, .pb-bar.is-sel .pb-chk:last-child {
  animation: pb-lift .14s ease-out forwards; z-index: 3;
  box-shadow: 0 8px 11px rgba(0,0,0,.6), inset 0 2px 3px rgba(255,255,255,.5);
}
/* flash on the point where a checker was just hit */
@keyframes pb-hit { 0% { background: rgba(255,90,70,0); } 22% { background: rgba(255,95,75,.78); } 100% { background: rgba(255,95,75,0); } }
.pb-point.pb-hit { animation: pb-hit .5s ease-out; }
/* ring on the most recently moved checker(s), either side */
.pb-point.is-last .pb-chk:last-child {
  box-shadow: 0 0 0 2px #ffd54a, 0 0 8px 2px rgba(255,213,74,.6), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.45);
}
/* mute / sound toggle */
.pb-sound { width: 38px; height: 38px; margin-top: .4rem; border: 1px solid var(--sg-line); border-radius: 8px; background: var(--sg-walnut-grain); cursor: pointer; padding: 7px; }
.pb-sound:hover { border-color: var(--sg-brass); }
.pb-sound svg { width: 100%; height: 100%; fill: var(--sg-brass); stroke: var(--sg-brass); }
.pb-sound__spk { stroke: none; }
.pb-sound__slash { display: none; stroke: #d98c8c; }
.pb-sound.is-muted .pb-sound__wave { display: none; }
.pb-sound.is-muted .pb-sound__slash { display: block; }
.pb-sound.is-muted svg { fill: var(--sg-faint); stroke: var(--sg-faint); }
.pb-main { flex: 1; display: flex; flex-direction: column; }
.pb-row { flex: 1; display: flex; min-height: 0; }
.pb-row--top { align-items: flex-start; }
.pb-row--bottom { align-items: flex-end; }
.pb-quad { flex: 1; display: flex; height: 100%; }
.pb-point { flex: 1; position: relative; height: 100%; cursor: pointer; }
.pb-point::before { content: ""; position: absolute; left: 8%; right: 8%; top: 0; bottom: 0; pointer-events: none; }
.pb-point:nth-child(odd) { --pb-pt: var(--pb-pt-a); }
.pb-point:nth-child(even) { --pb-pt: var(--pb-pt-b); }
.pb-point--top::before { clip-path: polygon(0 0, 100% 0, 50% 88%); background: linear-gradient(to bottom, var(--pb-pt), rgba(0,0,0,.42)); }
.pb-point--bottom::before { clip-path: polygon(50% 12%, 0 100%, 100% 100%); background: linear-gradient(to top, var(--pb-pt), rgba(0,0,0,.42)); }
.pb-point.is-target { background: rgba(212,175,55,.16); outline: 2px solid var(--sg-brass); outline-offset: -2px; }
.pb-point.is-sel { background: rgba(241,196,15,.14); outline: 2px solid var(--sg-brass-hi); outline-offset: -2px; }
.pb-stack { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; padding: 3%; }
.pb-row--bottom .pb-stack { flex-direction: column-reverse; }
.pb-chk { position: relative; width: 82%; max-width: 2.3rem; aspect-ratio: 1; border-radius: 50%; margin: 1px 0; display: grid; place-items: center; flex: 0 0 auto;
  box-shadow: 0 3px 5px rgba(0,0,0,.55), inset 0 2px 3px rgba(255,255,255,.5), inset 0 -4px 6px rgba(0,0,0,.45); }
.pb-chk::before { content: ""; position: absolute; inset: 24%; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 1px 1px rgba(255,255,255,.2); pointer-events: none; }
.pb-chk::after { content: ""; position: absolute; top: 14%; left: 22%; width: 34%; height: 22%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.55), rgba(255,255,255,0) 70%); pointer-events: none; }
.pb-chk .pb-more { position: relative; z-index: 2; }
.pb-chk--w { background: radial-gradient(circle at 36% 26%, #ffffff, var(--pb-w1) 32%, var(--pb-w2) 80%); border: 1px solid var(--pb-w-edge); }
.pb-chk--b { background: radial-gradient(circle at 36% 26%, var(--pb-b1), var(--pb-b2) 80%); border: 1px solid var(--pb-b-edge); }
.pb-more { font-family: var(--sg-mono); font-size: .7rem; font-weight: 700; color: var(--sg-brass); }

/* central bar — raised divider where hit checkers wait to re-enter */
.pb-bar { width: 9%; height: 100%; background: linear-gradient(90deg, var(--pb-bar1), var(--pb-bar2) 50%, var(--pb-bar1)); display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; box-shadow: inset 5px 0 9px rgba(0,0,0,.65), inset -5px 0 9px rgba(0,0,0,.65); border-left: 1px solid rgba(212,175,55,.28); border-right: 1px solid rgba(212,175,55,.28); }
.pb-row--top .pb-bar { justify-content: flex-end; }
.pb-row--bottom .pb-bar { justify-content: flex-start; }
.pb-bar.is-active { box-shadow: inset 0 0 0 2px var(--sg-brass); cursor: pointer; }
.pb-bar.is-sel { box-shadow: inset 0 0 0 2px var(--sg-brass-hi); }
.pb-bar .pb-chk { width: 74%; }

.pb-rail { width: 9%; display: flex; flex-direction: column; background: var(--pb-rail); border-left: 2px solid var(--sg-line); }
.pb-tray { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; cursor: pointer; }
.pb-tray--b { border-bottom: 2px solid var(--sg-line); }
.pb-tray__lbl { font-family: var(--sg-mono); font-size: .55rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sg-faint); text-align: center; }
.pb-tray__n { font-family: var(--sg-display); font-size: 1.4rem; color: var(--sg-text); }
.pb-tray.is-target { background: rgba(212,175,55,.18); outline: 2px solid var(--sg-brass); outline-offset: -2px; }

/* dice that land on the table */
.pb-dice-layer { position: absolute; top: 50%; left: 68%; transform: translate(-50%, -50%); display: flex; gap: .5rem; z-index: 5; pointer-events: none; }
.pb-die3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; width: 2.1rem; height: 2.1rem; padding: 3px; background: linear-gradient(150deg, #fffdf6, #e7ddc4); border-radius: 5px; box-shadow: 0 3px 7px rgba(0,0,0,.55), inset 0 -2px 3px rgba(0,0,0,.12); }
.pb-pip { width: 100%; aspect-ratio: 1; }
.pb-pip.on { background: #1a0d0a; border-radius: 50%; transform: scale(.62); }
.pb-dice-layer .pb-die3 { transition: transform .1s; }
.pb-dice-layer.is-rolling .pb-die3 { animation: pb-tumble .3s ease-in-out infinite; }
.pb-dice-layer.is-rolling .pb-die3:nth-child(2) { animation-delay: .09s; }
.pb-dice-layer.is-landed .pb-die3 { animation: pb-land .32s ease-out; }
@keyframes pb-tumble {
  0%   { transform: translateY(0) rotate(0deg); }
  25%  { transform: translateY(-13px) rotate(140deg) scale(1.07); }
  50%  { transform: translateY(0) rotate(200deg); }
  75%  { transform: translateY(-7px) rotate(320deg) scale(1.03); }
  100% { transform: translateY(0) rotate(360deg); }
}
@keyframes pb-land {
  0%   { transform: scale(1.32) translateY(-9px); }
  55%  { transform: scale(.9) translateY(0); }
  100% { transform: scale(1) translateY(0); }
}

/* board sizing in non-play contexts (homepage hero board, puzzle) */
.sg-boardbox .pb-board { max-width: 560px; margin: 0 auto; }
.sg-figure .pb-board { max-width: 460px; margin: 0 auto; }

@media (max-width: 720px) {
  .pb { flex-direction: column; align-items: center; }
  .pb-themes { flex-direction: row; justify-content: center; }
  .pb-board { max-width: 100%; width: 100%; }
  .pb-side { flex-basis: auto; width: 100%; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .7rem; }
  .pb-modes { width: 100%; }
  .pb-status { min-height: 0; flex: 1 1 100%; font-size: 1rem; }
  .pb-cup { flex-direction: row; padding: .55rem .9rem; }
  .pb-tray__lbl { display: none; }
}

/* ---------- Tools / calculators ---------- */
.sg-tool {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem;
  background: var(--sg-walnut-grain); border: 1px solid var(--sg-line);
  border-radius: 10px; padding: 1.4rem; margin: 1.5rem 0;
}
.sg-tool__label { font-family: var(--sg-display); letter-spacing: .03em; color: var(--sg-muted); font-size: .9rem; margin: 0 0 .7rem; text-transform: uppercase; }
.sg-dist-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.sg-dist-btn {
  font-family: var(--sg-mono); font-size: .9rem; padding: .5rem 0; cursor: pointer;
  background: var(--sg-ink); color: var(--sg-text); border: 1px solid var(--sg-line);
  border-radius: 6px; transition: background .12s, border-color .12s;
}
.sg-dist-btn:hover { border-color: var(--sg-brass); }
.sg-dist-btn[aria-pressed="true"] { background: var(--sg-oxblood); border-color: var(--sg-brass); color: var(--sg-parchment); }
.sg-tool__result { display: flex; flex-direction: column; justify-content: center; }
.sg-shot-big { font-family: var(--sg-display); font-size: 1.5rem; line-height: 1.25; color: var(--sg-text); margin: 0 0 .8rem; }
.sg-shot-big strong { color: var(--sg-brass); }
.sg-shot-pct { display: inline-block; margin-left: .4rem; color: var(--sg-brass-hi); }
.sg-rolls { display: flex; flex-wrap: wrap; gap: .35rem; }
.sg-roll { font-family: var(--sg-mono); font-size: .8rem; padding: .2rem .5rem; background: var(--sg-ink); border: 1px solid var(--sg-line); border-radius: 5px; color: var(--sg-muted); }

/* form fields shared by the match-equity + cube calculators */
.sg-field { margin-bottom: 1rem; }
.sg-field label { display: block; font-family: var(--sg-display); letter-spacing: .03em; text-transform: uppercase; font-size: .85rem; color: var(--sg-muted); margin-bottom: .35rem; }
.sg-field input, .sg-field select {
  width: 100%; padding: .6rem .7rem; font-family: var(--sg-body); font-size: 1rem;
  background: var(--sg-ink); color: var(--sg-text); border: 1px solid var(--sg-line); border-radius: 6px;
}
.sg-field input:focus, .sg-field select:focus { outline: none; border-color: var(--sg-brass); }
.sg-readout { background: var(--sg-walnut-grain); border: 1px solid var(--sg-line); border-radius: 10px; padding: 1.3rem; margin: 1.3rem 0; }
.sg-readout__big { font-family: var(--sg-display); font-size: 1.7rem; color: var(--sg-brass); margin: 0 0 .4rem; }
.sg-readout__verdict { font-weight: 800; }
.sg-readout__verdict.is-yes { color: #7bbf6a; }
.sg-readout__verdict.is-no { color: #d98c8c; }

.sg-kv { margin: .6rem 0 0; }
.sg-kv div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-top: 1px solid var(--sg-line-soft); }
.sg-kv dt { color: var(--sg-muted); font-size: .85rem; margin: 0; }
.sg-kv dd { color: var(--sg-text); font-size: .9rem; margin: 0; text-align: right; }
.sg-met-table td { text-align: center; transition: background .12s; }
.sg-met-table th { text-align: center; color: var(--sg-muted); }
.sg-met-table td.is-hit { background: var(--sg-oxblood); color: var(--sg-parchment); font-weight: 800; outline: 1px solid var(--sg-brass); }

/* ---------- Strategy guide layout (content + sticky rail) ---------- */
.sg-guidewrap { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 2.5rem; align-items: start; }
.sg-guidemain { min-width: 0; }
.sg-guiderail { position: sticky; top: 1.5rem; }
.sg-guiderail__cta { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.25rem; }
.sg-guidelist { display: flex; flex-direction: column; border-top: 1px solid var(--sg-line); padding-top: .8rem; }
.sg-guidelist__h { font-family: var(--sg-display); text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; color: var(--sg-faint); margin-bottom: .5rem; }
.sg-guidelist a { padding: .42rem 0; font-size: .9rem; color: var(--sg-muted); border-bottom: 1px solid var(--sg-line-soft); text-decoration: none; line-height: 1.3; }
.sg-guidelist a:last-child { border-bottom: 0; }
.sg-guidelist a:hover { color: var(--sg-text); }
.sg-guidelist a[aria-current="page"] { color: var(--sg-brass); font-weight: 700; }
@media (max-width: 900px) {
  .sg-guidewrap { grid-template-columns: 1fr; gap: 1.5rem; }
  .sg-guiderail { position: static; }
}

.rd-check { display: flex; gap: .5rem; align-items: center; font-size: .9rem; color: var(--sg-muted); margin-top: .4rem; cursor: pointer; }
.rd-check input { width: auto; }

/* pip-count trainer */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
.pc-actions { display: flex; gap: .5rem; margin-bottom: 1rem; }
.pc-result { background: var(--sg-walnut-grain); border: 1px solid var(--sg-line); border-radius: 10px; padding: 1.1rem; min-height: 2rem; }
@media (max-width: 760px) { .pc { grid-template-columns: 1fr; } }

/* opening-move reference */
.om { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
.om-figure { margin: 0; }
.om-rolls { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-bottom: 1rem; }
.om-result { background: var(--sg-walnut-grain); border: 1px solid var(--sg-line); border-radius: 10px; padding: 1.1rem; }
.om-dice { display: flex; gap: .5rem; margin-bottom: .7rem; }
.om-kind { font-family: var(--sg-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sg-faint); margin: 0; }
.om-play { font-family: var(--sg-display); font-size: 1.6rem; color: var(--sg-brass); margin: .15rem 0 .55rem; }
.om-note { color: var(--sg-muted); font-size: .92rem; line-height: 1.5; margin: 0; }
@media (max-width: 760px) { .om { grid-template-columns: 1fr; } }

/* ---------- Glossary ---------- */
.sg-glossary { margin-top: 1.5rem; }
.sg-gloss-group { margin-bottom: 1.75rem; }
.sg-gloss-letter {
  font-family: var(--sg-display); font-size: 1.5rem; font-weight: 700;
  color: var(--sg-brass); letter-spacing: .04em;
  border-bottom: 1px solid var(--sg-line); padding-bottom: 0.3rem; margin-bottom: 0.9rem;
}
.sg-gloss-item { padding: 0.55rem 0; border-bottom: 1px solid var(--sg-line-soft); }
.sg-gloss-item:last-child { border-bottom: 0; }
.sg-gloss-term {
  font-family: var(--sg-body); font-size: 1.02rem; font-weight: 800; color: var(--sg-text);
  margin: 0 0 0.2rem;
}
.sg-gloss-def { color: var(--sg-muted); font-size: 0.95rem; line-height: 1.55; margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sg-arena__grid { grid-template-columns: 1fr; }
  .sg-rail { display: flex; flex-direction: row; flex-wrap: wrap; grid-template-rows: none; }
  .sg-rail > * { flex: 1 1 280px; }
}
@media (max-width: 760px) {
  .sg-nav { display: none; }
  .sg-menu-btn { display: inline-block; }
  .sg-nav.is-open { display: flex; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--sg-walnut-grain); border-bottom: 1px solid var(--sg-line); padding: 0.5rem 1.25rem; }
  .sg-nav.is-open a { padding: 0.7rem 0; border-bottom: 1px solid var(--sg-line-soft); }
  .sg-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .sg-scene__grid { grid-template-columns: 1fr; }
  .sg-puzzle h2 { font-size: 2.1rem; }
  .sg-stage__bar { flex-direction: column; align-items: flex-start; }
}