/* frontend/guide/guide.css — the learn-to-play guide pages (Craps, the Royal Game of Ur).
   Each page wears a board scheme (Craps: "Felt", Ur: "Ember"): its --pgr-* tokens are set on .cg-page by the
   game's GENERATED css (craps-felt.css / ur-board.css, from board-schemes.js), so this file only reads tokens.
   Mobile-first; one readable column; 16px side gutter; no horizontal scroll. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.cg-page {
  margin: 0;
  min-height: 100vh;
  background: var(--cg-base, #0c3b27);   /* a game page sets --cg-base (its scheme's solid); Craps = the felt green */
  background-image: var(--pgr-bg);
  background-attachment: fixed;
  color: var(--pgr-txt);
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}
a { color: var(--pgr-gold); }
a:focus-visible, .cg-play:focus-visible, .cg-cta:focus-visible { outline: 2px solid var(--pgr-gold); outline-offset: 2px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.cg-top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 14px 16px;
}
.cg-logo {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 22px;
  color: var(--pgr-txt); text-decoration: none; letter-spacing: .01em;
}
.cg-play, .cg-cta {
  display: inline-block; text-decoration: none; font-weight: 800;
  background: var(--pgr-btn); color: var(--pgr-btnTxt);
  border-radius: 999px; box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.cg-play { padding: 8px 16px; font-size: 14px; }

/* ── Article column ──────────────────────────────────────────────────────── */
.cg-article { max-width: 760px; margin: 0 auto; padding: 4px 16px 32px; }
.cg-crumbs { font-size: 14px; color: var(--pgr-dim); margin: 4px 0 6px; }
.cg-crumbs a { color: var(--pgr-dim); }
h1, h2 { font-family: 'Playfair Display', Georgia, serif; line-height: 1.2; }
h1 { font-size: clamp(30px, 7vw, 44px); font-weight: 900; margin: 6px 0 12px; }
h2 { font-size: clamp(22px, 5vw, 28px); font-weight: 800; margin: 44px 0 10px; display: flex; align-items: center; gap: 12px; }
.cg-lede { font-size: 19px; color: var(--pgr-txt); margin: 0 0 18px; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin: 4px 0; }
b { font-weight: 700; }

/* Step numbers are casino chips: gold, dashed rim, like the felt's own chip badge. */
.cg-step {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800;
  background: var(--pgr-gold); color: #2a2111;
  border: 3px dashed rgba(255,255,255,.8); box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* The short version. */
.cg-tldr {
  background: var(--pgr-panel); border: 1px solid var(--pgr-line); border-left: 4px solid var(--pgr-gold);
  border-radius: 14px; padding: 14px 18px 6px; margin: 0 0 8px;
}
.cg-tldr h2 { margin: 0 0 6px; font-size: 20px; }

/* Tables. */
.cg-table-wrap { overflow-x: auto; margin: 0 0 16px; }
.cg-table { width: 100%; border-collapse: collapse; font-size: 15.5px; background: var(--pgr-panel); border-radius: 12px; overflow: hidden; }
.cg-table-narrow { width: auto; min-width: 240px; }
.cg-table th, .cg-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--pgr-line); vertical-align: top; }
.cg-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--pgr-dim); font-weight: 700; }
.cg-table tr:last-child td { border-bottom: 0; }
.cg-sub { display: block; font-size: 13px; font-weight: 500; color: var(--pgr-dim); }
@media (max-width: 520px) {
  .cg-table { font-size: 14.5px; }
  .cg-table th, .cg-table td { padding: 8px 7px; }
  .cg-table th { font-size: 11.5px; letter-spacing: .04em; }
}
.cg-win  { color: #8ee6a8; font-weight: 700; }
.cg-lose { color: #ff9a8f; font-weight: 700; }
.cg-push { color: var(--pgr-gold); font-weight: 700; }

/* Notes, tips, the key point. */
.cg-note { font-size: 14px; color: var(--pgr-dim); margin-top: 6px; }
.cg-tip {
  background: var(--pgr-seat); border: 1px dashed var(--pgr-line); border-radius: 12px;
  padding: 10px 14px; font-size: 15.5px;
}
.cg-key {
  background: var(--pgr-goldBg, rgba(240,214,140,.16)); border: 1px solid var(--pgr-gold);
  border-radius: 12px; padding: 12px 16px;
}

/* A roll example: two real dice faces + the sentence. */
.cg-roll {
  display: flex; align-items: center; gap: 14px; margin: 0 0 14px;
  background: var(--pgr-panel); border: 1px solid var(--pgr-line); border-radius: 14px; padding: 12px 14px;
}
.cg-roll p { margin: 0; }
.cg-roll-dice { display: flex; gap: 6px; flex: none; }
.cg-roll-dice .cg-face { display: inline-flex; }

/* ── The ways chart ──────────────────────────────────────────────────────── */
.cg-ways {
  display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; align-items: end;
  height: 150px; margin: 8px 0 0; padding: 10px 8px 0;
  background: var(--pgr-panel); border-radius: 14px;
}
.cg-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.cg-bar-ways { font-size: 12px; color: var(--pgr-dim); font-weight: 700; }
.cg-bar-fill { width: 100%; max-width: 34px; background: rgba(244,240,226,.28); border-radius: 6px 6px 0 0; }
.cg-bar-hot .cg-bar-fill { background: rgba(244,240,226,.5); }
.cg-bar-seven .cg-bar-fill { background: #e05a4f; }
.cg-bar-seven .cg-bar-ways, .cg-bar-seven .cg-bar-n { color: #ff9a8f; }
.cg-bar-n { font-weight: 800; font-size: 14px; padding: 4px 0 6px; }

/* ── Figures: the real felt, everything dark except the bet being explained ── */
.cg-fig { margin: 18px 0 20px; }
.cg-fig .cg-board {
  position: relative; width: 100%; padding: 10px; border-radius: 16px;
  background: rgba(0,0,0,.18); border: 1px solid var(--pgr-line);
  pointer-events: none; user-select: none;
}
.cg-fig figcaption { font-size: 15px; color: var(--pgr-dim); margin-top: 8px; }
.cg-fig figcaption b { color: var(--pgr-txt); }
.cg-board .crp-zone.cg-dark { border-color: rgba(255,255,255,.04); background: rgba(0,0,0,.4); box-shadow: none; }
.cg-board .crp-zone.cg-dark > :not(.crp-chip):not(.crp-riding):not(.crp-tilepuck) { opacity: .09; filter: grayscale(.8); }
.cg-board .crp-zone.cg-lit {
  border-color: var(--pgr-gold);
  box-shadow: 0 0 0 2px var(--pgr-gold), 0 0 22px rgba(240,214,140,.45);
}
/* A dark zone that holds one of your chips stays readable as "your other bet". */
.cg-board .crp-zone.cg-dark .crp-chip { opacity: .75; }

/* The ranked bet table on /craps/bets: an edge bar behind each number, coloured by tier. */
.cg-rank td:first-child a { color: var(--pgr-txt); text-decoration-color: var(--pgr-line); }
.cg-rank-edge { position: relative; min-width: 110px; }
.cg-rank-edge b { position: relative; }
.cg-rank-bar { position: absolute; left: 6px; top: 7px; height: 24px; border-radius: 4px; opacity: .45; }
.cg-rank-free .cg-rank-bar { background: #8ee6a8; }
.cg-rank-good .cg-rank-bar { background: #8ee6a8; }
.cg-rank-meh .cg-rank-bar  { background: var(--pgr-gold); }
.cg-rank-bad .cg-rank-bar  { background: #ff9a8f; }
.cg-rank-free b, .cg-rank-good b { color: #8ee6a8; }
.cg-rank-bad b { color: #ff9a8f; }
.cg-back { margin-top: 16px; font-weight: 600; }

/* ── CTA + footer ────────────────────────────────────────────────────────── */
.cg-plan li { margin: 6px 0; }
.cg-cta { padding: 14px 26px; font-size: 18px; margin: 10px 0 0; }
.cg-foot {
  max-width: 760px; margin: 0 auto; padding: 18px 16px 40px;
  font-size: 13.5px; color: var(--pgr-dim); border-top: 1px solid var(--pgr-line);
}
.cg-foot p { margin: 0 0 6px; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── The /guide index: one card per game with a guide ────────────────────── */
.cg-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.cg-card {
  background: var(--pgr-panel); border: 1px solid var(--pgr-line); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.cg-card-head { display: flex; gap: 12px; align-items: center; }
.cg-card-icon {
  flex: none; width: 52px; height: 52px; border-radius: 14px; font-size: 30px;
  display: flex; align-items: center; justify-content: center; background: var(--pgr-seat);
}
.cg-card h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; font-weight: 800; margin: 0; line-height: 1.15; }
.cg-card-sub { margin: 2px 0 0; font-size: 15px; color: var(--pgr-dim); }
.cg-card-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cg-card-links a {
  display: block; text-decoration: none; color: var(--pgr-txt);
  background: var(--pgr-seat); border: 1px solid var(--pgr-line); border-radius: 12px; padding: 10px 14px;
}
.cg-card-links a:hover { border-color: var(--pgr-gold); }
.cg-card-links b { display: block; color: var(--pgr-gold); }
.cg-card-links span { font-size: 14px; color: var(--pgr-dim); }
.cg-card-play {
  align-self: flex-start; text-decoration: none; font-weight: 800; font-size: 15px;
  background: var(--pgr-btn); color: var(--pgr-btnTxt); border-radius: 999px; padding: 9px 18px;
}

/* ── Tile boards (the Royal Game of Ur): the app's portrait board, turned on its side ──────
   guide.js sizes .ug-stage and transforms .ug-rotor (scale, then the app's own -90° turn), so
   your lane runs along the bottom as it does in the app on a wide screen. The tiles and pieces
   are inline-styled by the app's urRender(); only the guide's lighting lives here. */
.ug-stage { position: relative; width: 100%; overflow: hidden; margin: 4px 0 0; }
.ug-rotor { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ug-board { pointer-events: none; user-select: none; }
.ug-tile.ug-occupied > .ug-arrow { display: none; }
.ug-tile.cg-dark { filter: brightness(.72) saturate(.75); }
/* The board shows through: the app's tiles are near-transparent, so a dimmed square still gets a faint
   fill and edge — every square stays readable as part of the board, the lit ones just lead. */
.ug-tile.cg-dark::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.ug-tile.cg-lit { box-shadow: 0 0 0 2px var(--pgr-gold), 0 0 16px rgba(221,185,103,.45); z-index: 1; }
/* The app's tiles are nearly transparent (they sit on its own gradient), so a ring alone reads as
   an empty outline: a lit square also gets a warm wash, under the piece and the arrow. */
.ug-tile.cg-lit::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(221,185,103,.30), rgba(221,185,103,.12) 70%);
}
.ug-tile.cg-lit > .ug-arrow { opacity: .9 !important; }
.ug-tile > .ug-piece { position: relative; z-index: 1; }
.ug-num {
  position: absolute; right: 3px; bottom: 2px; transform: rotate(90deg);
  font: 800 11px/1 'Outfit', sans-serif; color: var(--pgr-gold); opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.ug-tile.ug-occupied .ug-num { color: #fff; }
/* data-route: the route as one arrow over the board (guide.js drawRoute). */
.ug-route { position: absolute; z-index: 3; overflow: visible; pointer-events: none; }
.ug-route-casing { fill: none; stroke: rgba(0,0,0,.55); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.ug-route-line { fill: none; stroke: #fff4d6; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.ug-route-head { fill: #fff4d6; stroke: rgba(0,0,0,.4); stroke-width: 1; }
.ug-tile.ug-on-route > .ug-arrow { display: none; }
.ug-odds { grid-template-columns: repeat(5, 1fr); }
.ug-odds .cg-bar-fill { max-width: 56px; }
.ug-related { margin: 8px 0 0; }
/* The sources list: small, numbered, every claim on the page points into it. */
.cg-sources { font-size: 14px; color: var(--pgr-dim); padding-left: 24px; }
.cg-sources li { margin: 6px 0; word-break: break-word; }
.cg-cite { font-size: .72em; vertical-align: super; line-height: 0; text-decoration: none; padding: 0 1px; }

/* ── Track boards (Senet): the app's own board at a fixed design width, scaled to the column ──────
   guide.js sizes .sn-stage and scales .sn-gboard (600 px wide). The squares, pieces and glyphs are
   the app's .sn-* rules (frontend/guide/senet-board.css, generated); only the guide's sizing and
   lighting live here. Every square keeps its number: a dimmed square is darker, never blank. */
.sn-stage { position: relative; width: 100%; overflow: hidden; margin: 4px 0 0; }
.sn-gboard {
  position: absolute; left: 0; top: 0; width: 600px; transform-origin: 0 0;
  pointer-events: none; user-select: none;
  --sn-cellh: 80px; --sn-numfs: 20px; --sn-glyphsz: 30px; --sn-chevfs: 34px; --sn-tagfs: 13px;
  --sn-piecew: 34px; --sn-pieceh: 41px;
}
.sn-gboard .sn-num-sq { opacity: .7; font-weight: 800; }
.sn-gboard .sn-sq.cg-dark { filter: brightness(.62) saturate(.6); }
.sn-gboard .sn-sq.cg-dark .sn-num-sq { opacity: .85; }
.sn-gboard .sn-sq.cg-lit { box-shadow: 0 0 0 3px var(--pgr-gold), 0 0 18px rgba(221,185,103,.55); z-index: 1; }
.sn-gboard .sn-sq.cg-lit .sn-num-sq { opacity: 1; }
.sn-gboard .sn-sq > .sn-piece { position: relative; z-index: 2; margin-top: 16px; }
.sn-gboard .sn-arrows { z-index: 5; }
.sn-bar-blanks .cg-bar-fill { background: var(--pgr-gold); }
.sn-bar-blanks .cg-bar-n { color: var(--pgr-gold); }
/* The 5's "4 blanks" line hangs BELOW its number (absolute), so that label is as tall as the
   others and all five bars stand on one baseline (owner, 2026-10-10). */
.sn-odds { height: 166px; padding-bottom: 16px; }
.sn-odds .cg-bar-n { position: relative; }
.sn-odds .cg-bar-n small {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: -6px;
  font-size: 10.5px; font-weight: 600; color: var(--pgr-dim); white-space: nowrap;
}

/* ── Station boards (Yut Nori): the app's own board, sized by its own --yn-bs token ────────────────
   guide.js sets --yn-bs on .yn-gboard to the column (at most 460 px); the stations sit at the app's
   inline left/top %, and their sizes follow --yn-bs (frontend/guide/yutnori-board.css, generated).
   The app prints no numbers on its stations, so guide.js adds the route numbers (.yn-gnum); a dimmed
   station is darker, never blank. A station holding pieces moves its number to a badge. */
.yn-stage { position: relative; width: 100%; margin: 4px 0 0; display: flex; justify-content: center; }
.yn-gboard { position: relative; pointer-events: none; user-select: none; font-family: 'Outfit', system-ui, sans-serif; }
.yn-gboard * { box-sizing: border-box; }
.yn-gboard .yn-lab { font-size: 9px; }
.yn-gboard .yn-arrows { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.yn-gnum {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; line-height: 1;
  font-size: max(11px, calc(var(--yn-bs) * .036)); font-weight: 800; color: var(--yn-ink); font-variant-numeric: tabular-nums;
}
.yn-gboard .yn-st.yn-occ .yn-gnum {
  left: auto; top: -7px; right: -9px; transform: none; z-index: 25; padding: 2px 4px; border-radius: 999px;
  font-size: max(10px, calc(var(--yn-bs) * .028)); background: var(--yn-stn); box-shadow: inset 0 0 0 1px var(--yn-stn-line);
}
.yn-gboard .yn-st.cg-dark { filter: brightness(.74) saturate(.6); }
.yn-gboard .yn-st.cg-dark .yn-gnum { opacity: .8; }
.yn-gboard .yn-st.cg-lit { box-shadow: inset 0 0 0 1.5px var(--yn-stn-hot-line), 0 0 0 3px var(--pgr-gold), 0 0 16px rgba(221,185,103,.55); z-index: 9; }
.yn-stage-route { padding-bottom: 22px; }
.yn-ghome {
  position: absolute; transform: translateX(-100%); white-space: nowrap;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pgr-gold);
}
.yn-bar-again .cg-bar-fill { background: var(--pgr-gold); }
.yn-bar-again .cg-bar-n { color: var(--pgr-gold); }
/* Each bar's throw name hangs BELOW its number (absolute), so all five bars stand on one baseline
   (the Senet chart's fix). */
.yn-odds { height: 166px; padding-bottom: 16px; }
.yn-odds .cg-bar-n { position: relative; }
.yn-odds .cg-bar-n small {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: -6px;
  font-size: 10.5px; font-weight: 600; color: var(--pgr-dim); white-space: nowrap;
}
/* A tag on the start corner (or beside it) would sit on the board's own "start · home" label. */
.yn-fig[data-tags*="r0:"] .yn-lab-start, .yn-fig[data-tags*="r19:"] .yn-lab-start { visibility: hidden; }