/* guide.css. The guide pages (rules, strategy, FAQ and overview of each game, and the /guides/ index).
   Used together with article.css, on pages that have <main class="sg-article">. Colors come from tokens.css, so every
   theme works. The chess diagrams use the chess board colors the player picked. */

.sg-article-body.is-wide { max-width: none; }

/* Guide pages are wider than the other reading pages, and all of them (overview, rules, strategy, FAQ) share one layout,
   so moving between the tabs does not shift anything. */
.sg-article.has-toc { width: min(100% - 2 * var(--space-4), 1280px); grid-template-columns: minmax(0, 880px) 260px; gap: var(--space-6); }
.sg-article.has-toc .sg-article-body { max-width: 880px; }
.sg-article.has-toc .sg-article-body p, .sg-article.has-toc .sg-article-body li { font-size: 1.125rem; line-height: 1.7; }
.sg-article.is-wide { width: min(100% - 2 * var(--space-4), 1180px); }

/* ── Breadcrumbs and tabs ───────────────────────────────────────────────────── */
.guide-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--space-4);
    color: var(--muted);
    font-size: var(--text-sm);
}
.guide-breadcrumbs a { color: var(--muted); text-decoration: none; }
.guide-breadcrumbs a:hover, .guide-breadcrumbs a:focus-visible { color: var(--text); text-decoration: underline; }
.guide-breadcrumbs span[aria-hidden] { color: var(--muted); }

.guide-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0 0 var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
}
.guide-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md);
}
.guide-tabs a:hover { color: var(--text); background: var(--surface-2); }
.guide-tabs a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--action); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.guide-tabs .guide-tabs-play { margin-left: auto; color: var(--on-action); background: var(--action); }
.guide-tabs .guide-tabs-play:hover { color: var(--on-action); background: var(--action); filter: brightness(1.06); }

.guide-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.guide-cta-row .primary-button, .guide-cta-row .ghost-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* ── Cards (the guide overviews) ────────────────────────────────────────────── */
.guide-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-2); }
.guide-card {
    display: block;
    padding: 20px;
    color: var(--text);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    transition: transform .2s ease, border-color .2s ease;
}
.guide-card:hover, .guide-card:focus-visible { transform: translateY(-3px); border-color: var(--accent); }
.guide-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.guide-card p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.guide-card .guide-card-more { display: inline-block; margin-top: 12px; color: var(--accent-text); font-size: .88rem; font-weight: 700; }

/* ── The /guides/ index ─────────────────────────────────────────────────────── */
.guide-jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); }
.guide-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--space-4);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
}
.guide-jump a:hover { border-color: var(--accent); }
/* One card under the other, each the full width. The text is on the left and the Play button on the right. */
.guide-index { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.guide-index .guide-game, .guide-puzzles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title action" "blurb action" "list action";
    column-gap: var(--space-6);
    row-gap: var(--space-3);
    align-items: start;
    margin: 0;
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.guide-game h2 { grid-area: title; margin: 0; }
.guide-game-blurb { grid-area: blurb; }
.guide-page-list { grid-area: list; }
.guide-game-actions { grid-area: action; align-self: center; }
@media (max-width: 760px) {
    .guide-index .guide-game, .guide-puzzles { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "blurb" "list" "action"; }
    .guide-game-actions { align-self: start; }
}
.guide-game-blurb { margin: 0; color: var(--muted); }
.guide-page-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 760px) { .guide-page-list { grid-template-columns: minmax(0, 1fr); } }
.guide-page-list a {
    display: grid;
    gap: 2px;
    padding: var(--space-3);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-md);
}
.guide-page-list a:hover, .guide-page-list a:focus-visible { background: var(--surface-2); }
.guide-page-list b { color: var(--accent-text); }
.guide-page-list span { color: var(--muted); font-size: .9rem; line-height: 1.55; }

/* ── The "next" box at the end of a page ────────────────────────────────────── */
.guide-next {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-7);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.guide-next-link { display: grid; gap: 4px; color: var(--text); text-decoration: none; }
.guide-next-link:hover b { text-decoration: underline; }
.guide-next-label { color: var(--muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.guide-next-link b { font-size: 1.2rem; }
.guide-next-link span:last-child { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.guide-next-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Piece rows, diagrams, steps, glossary ──────────────────────────────────── */
.guide-piece-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.guide-piece-row:last-child { border-bottom: 0; }
.guide-piece-icon { display: grid; flex: 0 0 auto; place-items: center; width: 56px; height: 56px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.guide-piece-icon img { width: 44px; height: 44px; object-fit: contain; }
.guide-piece-row h3 { margin: 0 0 6px; font-size: 1rem; }
.guide-piece-row p { margin: 0; }

.guide-board-figure { margin: 18px 0 6px; }
.guide-board { display: grid; grid-template-columns: repeat(var(--gb-cols, 8), 1fr); width: min(360px, 100%); overflow: hidden; border: 2px solid var(--line); border-radius: 8px; }
.guide-board .gb-sq { display: grid; place-items: center; aspect-ratio: 1; }
.guide-board .gb-light { background: var(--sq-light); }
.guide-board .gb-dark { background: var(--sq-dark); }
.guide-board .gb-mark { box-shadow: inset 0 0 0 3px rgba(45, 212, 191, .85); }
.guide-board .gb-sq img { width: 78%; height: 78%; object-fit: contain; }
.guide-board .gb-dot { width: 26%; height: 26%; border-radius: 50%; background: rgba(45, 212, 191, .85); }
.guide-board-caption { margin: 10px 0 0; color: var(--muted); font-size: .86rem; line-height: 1.6; }
.guide-board-wrap { position: relative; width: min(360px, 100%); }
.guide-board-wrap .guide-board { width: 100%; }
.guide-board-arrows { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.guide-step-badge { position: absolute; top: -10px; left: -10px; z-index: 3; display: grid; place-items: center; width: 26px; height: 26px; color: var(--on-action); font-size: .85rem; font-weight: 800; background: var(--action); border-radius: 50%; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); }
.guide-diagram-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }

.guide-steps-figure { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; margin: 14px 0 4px; }
.guide-steps-figure img { flex: 0 0 auto; width: min(250px, 100%); height: auto; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(0, 0, 0, .3); }
.guide-steps-figure img.guide-setup-card { width: min(430px, 100%); background: #0f1224; }
.guide-steps-figure ol { display: grid; flex: 1 1 240px; gap: 10px; margin: 0; padding-left: 20px; color: var(--muted); line-height: 1.65; }
.guide-steps-figure ol li::marker { color: var(--accent-text); font-weight: 700; }

.guide-glossary-group h3 { margin: 22px 0 10px; }
.guide-glossary-group:first-of-type h3 { margin-top: 4px; }
.guide-term { display: block; margin-bottom: 2px; color: var(--accent-text); font-size: 1.05em; font-weight: 800; letter-spacing: .01em; }

/* ── Questions (accordion). The answers are in the page, closed ones are just folded. ── */
.guide-faq-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.guide-faq-tools button {
    min-height: 44px;
    padding: 0 var(--space-4);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    cursor: pointer;
}
.guide-faq-tools button:hover { background: var(--surface-2); }
details.guide-faq-item { margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
details.guide-faq-item:first-of-type { border-top: 1px solid var(--line); }
details.guide-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 0; list-style: none; cursor: pointer; }
details.guide-faq-item summary::-webkit-details-marker { display: none; }
details.guide-faq-item summary h3 { margin: 0; font-size: 1.02rem; }
details.guide-faq-item summary::after { content: "+"; display: grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; color: var(--accent-text); font-weight: 700; border: 1px solid var(--line); border-radius: 50%; }
details.guide-faq-item[open] summary::after { content: "\2212"; }
details.guide-faq-item .guide-faq-answer { padding: 2px 0 16px; }
details.guide-faq-item .guide-faq-answer p { margin: 0 0 10px; }
details.guide-faq-item .guide-faq-answer p:last-child { margin-bottom: 0; }
.guide-faq-item h3 { margin: 0 0 8px; }

@media (max-width: 720px) {
    .guide-piece-row { gap: 12px; }
    .guide-piece-icon { width: 46px; height: 46px; }
    .guide-piece-icon img { width: 36px; height: 36px; }
    .guide-tabs .guide-tabs-play { margin-left: 0; }
}

/* ── Print. Guides are printed and shared, so only the article is drawn, with every answer open. ── */
@media print {
    .guide-tabs, .guide-next, .guide-faq-tools, .guide-jump, .sg-toc, .guide-breadcrumbs, .mobile-app-dock { display: none !important; }
    .sg-article, .sg-article.has-toc { display: block; width: 100%; margin: 0; }
    .sg-article-body { max-width: none; }
    .sg-article-section { break-inside: avoid-page; border-color: #999; }
    .guide-board-figure, .guide-piece-row, details.guide-faq-item { break-inside: avoid; }
    details.guide-faq-item summary::after { display: none; }
    body, .sg-page { color: #000; background: #fff; }
    a { color: #000; text-decoration: underline; }
}

.guide-puzzles { margin-top: var(--space-4); }

/* article.css underlines and colors every link of an article, the guide parts that are buttons or cards opt out. */
.sg-article .guide-tabs a,
.sg-article .guide-breadcrumbs a,
.sg-article .guide-jump a,
.sg-article .guide-page-list a,
.sg-article .guide-next-link,
.sg-article .guide-card,
.sg-article .guide-faq-tools button { text-decoration: none; }
.sg-article .guide-tabs a { color: var(--muted); }
.sg-article .guide-tabs a:hover, .sg-article .guide-tabs a[aria-current="page"] { color: var(--text); }
.sg-article .guide-tabs a.guide-tabs-play { color: var(--on-action); }
.sg-article .guide-breadcrumbs a { color: var(--muted); }
.sg-article .guide-jump a, .sg-article .guide-next-link { color: var(--text); }
.sg-article .guide-page-list a { color: var(--text); }
.sg-article .guide-page-list b { color: var(--accent-text); }
.sg-article .guide-card { color: var(--text); }
.sg-article .primary-button { color: var(--on-action); text-decoration: none; }
.sg-article .ghost-button { color: var(--text); text-decoration: none; }
.guide-page-list li, .guide-page-list li::marker { margin: 0; padding: 0; }
.guide-page-list { padding-left: 0; }
.sg-article .guide-page-list { margin: 0; padding-left: 0; }
.sg-article .guide-page-list li { margin: 0; }
.sg-article .guide-game-blurb, .sg-article .guide-page-list span, .sg-article .guide-board-caption, .sg-article .guide-card p { color: var(--muted); }
.sg-article .guide-next-link span:last-child, .sg-article .guide-next-label { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.sg-article .guide-next-label { font-size: var(--text-xs); }
.sg-article