/* Guide pages; layout and type come from about.css (body carries page-about as well). */
.page-guide .guide-table-wrap { margin-top: 20px; overflow-x: auto; border: 1px solid var(--v4-line); }
.page-guide .guide-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.page-guide .guide-table th,
.page-guide .guide-table td { padding: 13px 16px; border-bottom: 1px solid var(--v4-line); text-align: left; color: var(--v4-copy); }
.page-guide .guide-table thead th { color: var(--v4-gold-bright); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-weight: 400; background: var(--v4-panel); }
.page-guide .guide-table tbody th { font-weight: 400; }
.page-guide .guide-table tbody th a { color: var(--v4-ink); }
.page-guide .guide-table tbody th a:hover { color: var(--v4-gold-bright); }
.page-guide .guide-table tbody tr:last-child th,
.page-guide .guide-table tbody tr:last-child td { border-bottom: 0; }
.page-guide .guide-table td span { opacity: .65; font-size: .92em; }

.page-guide .guide-role { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 26px; padding: 24px; border: 1px solid var(--v4-line); background: var(--v4-panel); scroll-margin-top: 90px; }
.page-guide .guide-role img { width: 100%; height: auto; display: block; }
.page-guide .guide-role__art { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.page-guide .guide-role__figure { margin: 0; padding-top: 8px; text-align: center; }
/* Faction colors of the original game: blue-teal for Light, fire red for Fury. */
.page-guide .guide-role__figure--light { background: radial-gradient(ellipse at 50% 62%, rgba(64, 170, 200, .24), transparent 68%); }
.page-guide .guide-role__figure--fury { background: radial-gradient(ellipse at 50% 62%, rgba(214, 78, 44, .24), transparent 68%); }
.page-guide .guide-role__figure figcaption { margin-top: 6px; color: var(--v4-gold-bright); font-family: var(--p-body, "Noto Sans", system-ui, sans-serif); font-size: 13px; }
.page-guide .guide-role h3 { margin: 0; color: var(--v4-gold-bright); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: 23px; font-weight: 400; }
.page-guide .guide-role__kind { margin: 4px 0 12px; color: var(--v4-ink); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.page-guide .guide-role p { margin: 0 0 14px; color: var(--v4-copy); }
.page-guide .guide-role dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; }
.page-guide .guide-role dt { color: var(--v4-ink); font-family: var(--p-body, "Noto Sans", system-ui, sans-serif); }
.page-guide .guide-role dd { margin: 0; color: var(--v4-copy); }
.page-guide .about-cta .btn-primary { display: inline-flex; margin: 0 10px 8px 0; }

.page-guide .about-grid h3 a,
.page-guide .guide-card-title a { color: inherit; text-decoration: none; }
.page-guide .about-grid h3 a:hover,
.page-guide .guide-card-title a:hover { color: var(--v4-gold-bright); }
.page-guide .guide-card-title { margin: 0 0 8px; color: var(--v4-ink); font-family: var(--p-display, "Barlow Condensed", "Arial Narrow", sans-serif); font-size: 20px; font-weight: 400; }
.page-guide .about-grid p a { color: var(--v4-gold-bright); }

@media (max-width: 720px) {
    .page-guide .guide-role { grid-template-columns: 1fr; padding: 18px; }
    .page-guide .guide-role__art { max-width: 360px; }
    .page-guide .guide-role dl { grid-template-columns: 1fr; gap: 2px; }
    .page-guide .guide-role dd { margin-bottom: 10px; }
}

/* Guide index cards: keep the "read" link apart from the summary and level across a row. */
.page-guide .about-grid article { display: flex; flex-direction: column; }
.page-guide .about-grid article > p + p { margin-top: auto; padding-top: 14px; }

/* In-game screenshots under a guide section, shown at their native pixel size. */
.page-guide .guide-shots { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; margin-top: 20px; }
.page-guide .guide-shots figure { margin: 0; max-width: 100%; }
.page-guide .guide-shots img { display: block; max-width: 100%; height: auto; border: 1px solid var(--v4-line); }
.page-guide .guide-shots figcaption { margin-top: 6px; color: var(--v4-gold-bright); font-size: 13px; }