/* Shared by the guides, the privacy page and the "guide" block on game pages. */
.guide-body {
    background: #0A0D17;
    color: #E2E8F0;
    font-family: 'Inter', system-ui, sans-serif;
}

.guide-prose h1 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 1rem;
}

.guide-prose h2 {
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2.25rem 0 0.5rem;
}

.guide-prose h3 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 1.5rem 0 0.25rem;
}

.guide-prose p,
.guide-prose li {
    color: #cbd5e1;
    line-height: 1.7;
}

.guide-prose p { margin: 0.75rem 0; }
.guide-prose ul { list-style: disc; padding-left: 1.25rem; margin: 0.75rem 0; }
.guide-prose ol { list-style: decimal; padding-left: 1.25rem; margin: 0.75rem 0; }
.guide-prose li { margin: 0.25rem 0; }
.guide-prose strong { color: #f1f5f9; }
.guide-prose a { color: #34d399; text-decoration: underline; text-underline-offset: 2px; }
.guide-prose a:hover { color: #6ee7b7; }

.guide-prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 1rem 0;
}

.guide-prose th,
.guide-prose td {
    border: 1px solid #232B40;
    padding: 0.45rem 0.7rem;
    text-align: right;
    white-space: nowrap;
}

.guide-prose th:first-child,
.guide-prose td:first-child { text-align: left; }
.guide-prose thead th { background: #121826; color: #94A3B8; font-weight: 600; }
.guide-prose tbody tr:nth-child(even) td { background: #0e1320; }

.guide-prose .callout {
    background: #121826;
    border: 1px solid #065f46;
    border-radius: 1rem;
    padding: 0.9rem 1.1rem;
    margin: 1.5rem 0;
    color: #cbd5e1;
}

.guide-prose details {
    background: #121826;
    border: 1px solid #232B40;
    border-radius: 1rem;
    padding: 0.7rem 1rem;
    margin: 0.6rem 0;
}

.guide-prose summary { cursor: pointer; font-weight: 600; color: #f1f5f9; }
.guide-prose details p { margin: 0.5rem 0 0.1rem; }

.guide-prose .guide-list { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.guide-prose .guide-card {
    background: #121826;
    border: 1px solid #232B40;
    border-radius: 1rem;
    padding: 0.8rem 1.1rem;
    margin: 0;
}
.guide-prose .guide-card a { text-decoration: none; }
.guide-prose .guide-card span { display: block; font-size: 0.85rem; color: #94A3B8; }

.guide-prose .calc {
    background: #121826;
    border: 1px solid #232B40;
    border-radius: 1rem;
    padding: 1rem 1.1rem;
    margin: 1.25rem 0;
}
.guide-prose .calc label { display: flex; align-items: center; gap: 0.75rem; margin: 0.6rem 0; font-size: 0.9rem; color: #cbd5e1; }
.guide-prose .calc input[type=range] { flex: 1; accent-color: #34d399; }
.guide-prose .calc output { min-width: 2.5rem; text-align: right; font-variant-numeric: tabular-nums; color: #f1f5f9; font-weight: 600; }
.guide-prose .calc .result { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-top: 0.9rem; }
.guide-prose .calc .result div { background: #0A0D17; border: 1px solid #232B40; border-radius: 0.75rem; padding: 0.6rem 0.8rem; }
.guide-prose .calc .result b { display: block; font-size: 1.3rem; color: #34d399; font-variant-numeric: tabular-nums; }
.guide-prose .calc .result span { font-size: 0.75rem; color: #94A3B8; }
.guide-prose .calc button {
    background: #10b981; color: #0A0D17; font-weight: 600; border-radius: 0.75rem; padding: 0.5rem 1rem; font-size: 0.9rem;
}
.guide-prose .calc button:hover { background: #34d399; }

@media (max-width: 520px) {
    .guide-prose th,
    .guide-prose td { padding: 0.35rem 0.45rem; font-size: 0.78rem; }
    .guide-prose th { white-space: normal; }
}