/* EDITORIAL PAGES ONLY — the how-to-play guide and the legal pages (about, privacy, terms). Never loaded by the game. */
/* Reuses the identity from styles.css (Inter, #0e0f0e, #151515, #cb6822) without pulling in the gameplay cascade. */

.guide{width:min(820px,calc(100% - 40px));margin:0 auto;padding:48px 0 80px}

/* The shared h1 rule is tuned for the hero headline; editorial text needs a calmer scale. */
.guide h1{font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-1.6px;margin:0 0 14px}
.guide .guide-intro{font-size:19px;line-height:1.5;color:#aaa;margin:0 0 10px;max-width:62ch}
.guide .guide-meta{font-size:13px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:#777;margin:0 0 40px}
.guide .guide-meta i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#cb6822;margin:0 9px 2px;font-style:normal}

.guide section{margin:0 0 40px;scroll-margin-top:24px}
.guide h2{font-size:clamp(24px,3.4vw,32px);letter-spacing:-.8px;line-height:1.15;margin:0 0 6px;padding-top:26px;border-top:1px solid #333}
.guide .section-lead{color:#888;font-size:15px;margin:0 0 18px}
.guide h3{font-size:17px;font-weight:800;letter-spacing:-.2px;color:#fff;margin:24px 0 8px}
.guide p{font-size:16px;line-height:1.6;color:#bbb;margin:0 0 14px;max-width:66ch}
.guide strong{color:#fff;font-weight:800}
.guide em{color:#cb6822;font-style:normal;font-weight:700}

.guide ul,.guide ol{margin:0 0 16px;padding-left:22px;max-width:66ch}
.guide li{font-size:16px;line-height:1.6;color:#bbb;margin-bottom:9px}
.guide li::marker{color:#cb6822;font-weight:800}

/* Table of contents */
.guide .guide-toc{border:1px solid #5f5f5f;border-radius:10px;background:#151515;padding:18px 22px;margin:0 0 44px}
.guide .guide-toc h2{font-size:12px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#777;border-top:0;padding-top:0;margin:0 0 12px}
.guide .guide-toc ol{margin:0;padding-left:20px;columns:2;column-gap:26px}
.guide .guide-toc li{margin-bottom:6px;break-inside:avoid}
.guide .guide-toc a{color:#eae0d1;text-decoration:none;border-bottom:1px solid transparent;font-size:15px}
.guide .guide-toc a:hover,.guide .guide-toc a:focus-visible{color:#cb6822;border-bottom-color:#cb6822}

/* Callout for the rules that cost players games until they learn them. */
.guide .guide-note{border:1px solid #5f5f5f;border-left:3px solid #cb6822;border-radius:10px;background:#151515;padding:16px 20px;margin:0 0 18px}
.guide .guide-note p{margin:0;max-width:none;color:#ccc}
.guide .guide-note p+p{margin-top:10px}
.guide .guide-note .note-label{display:block;font-size:11px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase;color:#cb6822;margin-bottom:7px}

/* Formation figure: the 4-3-3 slots, in pitch order. */
.guide .formation{border:1px solid #5f5f5f;border-radius:10px;background:#151515;padding:18px;margin:0 0 18px}
.guide .formation-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.guide .formation-row:last-child{margin-bottom:0}
.guide .formation-slot{min-width:62px;padding:9px 10px;border:1px solid #444;border-radius:8px;background:#111;text-align:center;font-size:12px;font-weight:900;letter-spacing:.6px;color:#eae0d1}
.guide .formation-caption{margin:14px 0 0;font-size:13px;color:#888;text-align:center;max-width:none}

/* Comparison grid used for Classic vs Blind. */
.guide .mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 18px}
.guide .mode-card{border:1px solid #5f5f5f;border-radius:10px;background:#151515;padding:18px 20px}
.guide .mode-card h3{margin:0 0 10px;font-size:19px;color:#cb6822}
.guide .mode-card ul{margin:0;padding-left:19px;max-width:none}
.guide .mode-card li{font-size:15px;margin-bottom:7px}

.guide .guide-foot{margin-top:52px;padding-top:26px;border-top:1px solid #333}
.guide .guide-foot p{color:#888;font-size:15px}
.guide .guide-back{display:inline-block;margin-top:6px;padding:14px 26px;border:1px solid #ffb886;border-radius:10px;background:#cb6822;color:#fff;font-size:17px;font-weight:900;text-decoration:none}
.guide .guide-back:hover,.guide .guide-back:focus-visible{background:#b25a1c}

/* The shared header keeps its brand link; the guide marks itself as the current page. */
.shell>header .how-to[aria-current="page"]{color:#fff;border-bottom-color:#fff}

@media(max-width:700px){
  .guide{width:calc(100% - 32px);padding:30px 0 56px}
  .guide .guide-intro{font-size:17px}
  .guide .guide-meta{margin-bottom:30px}
  .guide .guide-toc ol{columns:1}
  .guide .mode-grid{grid-template-columns:1fr}
  .guide h2{padding-top:22px}
  .guide section{margin-bottom:32px}
  .guide .formation-slot{min-width:54px;font-size:11px;padding:8px}
}

/* Cross-language links. Static, so the guide works with JavaScript disabled. */
.guide .guide-langs{margin:26px 0 0;font-size:14px;color:#777}
.guide .guide-langs a{color:#cb6822;text-decoration:none;border-bottom:1px solid transparent}
.guide .guide-langs a:hover,.guide .guide-langs a:focus-visible{border-bottom-color:#cb6822}
.guide .guide-langs a[aria-current="page"]{color:#eae0d1;font-weight:700;border-bottom-color:#5f5f5f}