/* The player docs' styling.
 *
 * Moved out of templates/docs.html on 2026-08-31 (4 blocks,
 * concatenated in source order). It was inline in the HTML, so no
 * browser could cache a byte of it and it was re-sent on every
 * request. url_for('static', ...) stamps this URL with the file's own
 * CONTENT hash and serves it immutable for a year.
 *
 * Byte-for-byte the blocks that were there; only the address moved.
 */

        /* Back-compat aliases. Several inline styles in the body still use the
           old token names from the legacy light theme. Aliasing keeps them
           rendering correctly on the new dark surface without rewriting
           hundreds of inline references. */
        :root {
            --bg-body:        var(--pbs-bg);
            --bg-card:        var(--pbs-card);
            --text-primary:   var(--pbs-text);
            --text-heading:   var(--pbs-text);
            --text-secondary: var(--pbs-text-2);
            --text-muted:     var(--pbs-muted);
            --accent:         var(--pbs-accent);
            --accent-secondary: var(--pbs-accent-2);
            --gold:           var(--pbs-gold);
            --green:          var(--pbs-green-deep);
            --red:            var(--pbs-red);
            --purple:         var(--pbs-purple);
            --border:         var(--pbs-border);
            --border-subtle:  var(--pbs-border-soft);
            --btn-gradient:   var(--pbs-accent-grad);
            --btn-shadow:     rgba(79, 157, 255, .35);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html {
            scroll-padding-top: 88px;
            scroll-behavior: smooth;
        }
        html, body {
            background: var(--pbs-bg);
            color: var(--pbs-text);
            font-family: var(--pbs-font);
            line-height: 1.65;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "ss01";
        }
        .doc-section[id], h2[id] { scroll-margin-top: 88px; }
        .docs-container a { color: var(--pbs-accent); text-decoration: none; }
        .docs-container a:hover { color: var(--pbs-accent-2); text-decoration: underline; }

        /* Back-to-top floating button */
        #backToTop {
            position: fixed;
            right: 1.25rem;
            bottom: 1.25rem;
            width: 44px; height: 44px;
            display: none;
            align-items: center; justify-content: center;
            background: var(--pbs-accent-grad);
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 1.3rem;
            cursor: pointer;
            box-shadow: var(--pbs-shadow-glow);
            z-index: 90;
            transition: transform 0.15s ease;
        }
        #backToTop:hover { transform: translateY(-2px); }
        #backToTop.visible { display: inline-flex; }
        @media (max-width: 600px) {
            #backToTop { right: 0.8rem; bottom: 0.8rem; width: 40px; height: 40px; font-size: 1.1rem; }
        }

        /* Top nav, mirrors the landing nav exactly */
        nav.top {
            position: sticky; top: 0; z-index: 50;
            background: rgba(11, 15, 23, 0.85);
            backdrop-filter: saturate(160%) blur(12px);
            -webkit-backdrop-filter: saturate(160%) blur(12px);
            border-bottom: 1px solid var(--pbs-border-soft);
        }
        nav.top .inner {
            max-width: 1180px; margin: 0 auto;
            padding: 14px 24px;
            display: flex; align-items: center; justify-content: space-between;
            gap: 16px;
        }
        nav.top .logo {
            font-weight: 800; font-size: 16px; letter-spacing: -0.01em;
            color: var(--pbs-text); text-decoration: none;
        }
        nav.top .logo .g {
            background: var(--pbs-accent-grad);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        nav.top .right { display: flex; align-items: center; gap: 10px; }
        nav.top .right a.link {
            color: var(--pbs-text-2); font-size: 14px; font-weight: 600;
            padding: 8px 12px; border-radius: var(--pbs-r-pill);
            text-decoration: none;
        }
        nav.top .right a.link.active { color: var(--pbs-text); background: rgba(255,255,255,.05); }
        nav.top .right a.link:hover { color: var(--pbs-text); background: rgba(255,255,255,.05); }
        @media (max-width: 600px) { nav.top .right .hide-sm { display: none; } }

        /* Layout */
        .docs-layout {
            max-width: 1400px;
            margin: 0 auto;
            padding: 2rem 2rem 4rem;
            display: block;
        }
        .docs-container { max-width: 100%; }

        /* Hero block, intentionally small */
        .docs-hero {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--pbs-border-soft);
        }
        .docs-hero .eyebrow {
            font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
            font-weight: 800; color: var(--pbs-text-2);
            margin-bottom: 10px;
        }
        .docs-container h1 {
            font-size: clamp(2rem, 3.6vw, 2.75rem);
            font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
            color: var(--pbs-text);
            margin-bottom: 0.6rem;
        }
        .docs-container h1 .g {
            background: var(--pbs-accent-grad);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .docs-container .tagline {
            font-size: 1rem; color: var(--pbs-text-2);
            margin-bottom: 1.25rem;
            max-width: 64ch;
        }
        .docs-jump {
            display: flex; flex-wrap: wrap; gap: 8px;
        }
        .docs-jump a {
            display: inline-flex; align-items: center;
            padding: 6px 12px;
            background: var(--pbs-inset);
            border: 1px solid var(--pbs-border);
            border-radius: var(--pbs-r-pill);
            color: var(--pbs-text-2);
            font-size: 12px; font-weight: 700;
            text-decoration: none;
        }
        .docs-jump a:hover {
            color: var(--pbs-text);
            border-color: var(--pbs-accent);
            text-decoration: none;
        }

        /* TOC, mobile default (details/summary) */
        .docs-toc {
            background: var(--pbs-card);
            border: 1px solid var(--pbs-border);
            border-radius: var(--pbs-r-md);
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
        }
        .docs-toc summary {
            cursor: pointer;
            font-weight: 700;
            color: var(--pbs-text);
            font-size: 0.95rem;
            list-style: none;
            display: flex; align-items: center; gap: 8px;
        }
        .docs-toc summary::after {
            content: "›";
            margin-left: auto;
            transition: transform .15s;
            color: var(--pbs-text-2);
            font-size: 1.1rem;
        }
        .docs-toc[open] summary::after { transform: rotate(90deg); }
        .docs-toc .toc-group { margin-top: 1rem; }
        .docs-toc .toc-group-title {
            font-size: 11px;
            font-weight: 800;
            color: var(--pbs-text-2);
            text-transform: uppercase;
            letter-spacing: 0.16em;
            margin-top: 0.85rem;
            margin-bottom: 0.4rem;
        }
        .docs-toc ul { list-style: none; padding: 0; margin: 0; }
        .docs-toc li { margin: 0; }
        .docs-toc a {
            display: block;
            padding: 0.3rem 0.55rem;
            font-size: 0.85rem;
            color: var(--pbs-text-2);
            text-decoration: none;
            border-radius: var(--pbs-r-sm);
            border-left: 2px solid transparent;
        }
        .docs-toc a:hover {
            background: rgba(79, 157, 255, .08);
            color: var(--pbs-text);
            border-left-color: var(--pbs-accent);
            text-decoration: none;
        }
        /* Scroll-spy active link (set by IntersectionObserver, progressive
           enhancement, only meaningful on the sticky desktop rail). */
        .docs-toc a.toc-active {
            background: rgba(79, 157, 255, .12);
            color: var(--pbs-text);
            border-left-color: var(--pbs-accent);
            font-weight: 700;
        }
        #docsSearch {
            width: calc(100% - 0.6rem);
            margin: 0 0.3rem 0.6rem;
            padding: 0.45rem 0.6rem;
            border: 1px solid var(--pbs-border);
            border-radius: var(--pbs-r-sm);
            font-size: 0.8rem;
            font-family: inherit;
            background: var(--pbs-inset);
            color: var(--pbs-text);
            outline: none;
            transition: border-color .15s, box-shadow .15s;
        }
        #docsSearch::placeholder { color: var(--pbs-muted); }
        #docsSearch:focus {
            border-color: var(--pbs-accent);
            box-shadow: 0 0 0 3px rgba(79, 157, 255, .18);
        }
        #docsSearchEmpty { color: var(--pbs-muted); }

        /* Desktop: sidebar + main two-column layout */
        @media (min-width: 800px) {
            .docs-layout {
                display: grid;
                grid-template-columns: 240px minmax(0, 1fr);
                gap: 2.5rem;
                align-items: start;
                padding: 2.5rem 2rem 4rem;
            }
            .docs-toc {
                position: sticky;
                top: 76px;
                max-height: calc(100vh - 100px);
                overflow-y: auto;
                margin-bottom: 0;
                padding: 1rem;
            }
            .docs-toc summary { display: none; }
            .docs-toc[open] > :not(summary),
            .docs-toc > :not(summary) { display: block; }
            .docs-toc > .toc-inner { display: block !important; }
        }

        /* Sections */
        .doc-section {
            position: relative;
            margin-bottom: 1.75rem;
            background: var(--pbs-card);
            border: 1px solid var(--pbs-border);
            border-radius: var(--pbs-r-md);
            padding: 1.9rem 1.9rem 1.6rem;
            overflow: hidden;
        }
        /* Domain-coloured wash, applied via .wash-* on the section root.
           Sits behind the h2 and fades out so the body stays clean. */
        .doc-section.wash-combat::before,
        .doc-section.wash-money::before,
        .doc-section.wash-mayor::before,
        .doc-section.wash-compete::before,
        .doc-section.wash-world::before {
            content: ""; position: absolute;
            top: 0; left: 0; right: 0; height: 110px;
            pointer-events: none;
        }
        .doc-section.wash-combat::before  { background: linear-gradient(180deg, rgba(255, 92, 92, .14), transparent); }
        .doc-section.wash-money::before   { background: linear-gradient(180deg, rgba(240, 199, 90, .14), transparent); }
        .doc-section.wash-mayor::before   { background: linear-gradient(180deg, rgba(162, 121, 255, .16), transparent); }
        .doc-section.wash-compete::before { background: linear-gradient(180deg, rgba(79, 157, 255, .14), transparent); }
        .doc-section.wash-world::before   { background: linear-gradient(180deg, rgba(110, 231, 168, .12), transparent); }
        .doc-section > * { position: relative; }
        .doc-section h2 {
            font-size: 1.45rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            line-height: 1.2;
            color: var(--pbs-text);
            margin-bottom: 1.1rem;
            display: flex; align-items: center; gap: 0.65rem;
        }
        .doc-section h2 .icon {
            font-size: 1.6rem; line-height: 1;
            flex-shrink: 0;
        }
        .doc-section h3 {
            font-size: 1.02rem;
            font-weight: 800;
            color: var(--pbs-text);
            margin-top: 1.75rem;
            margin-bottom: 0.55rem;
            letter-spacing: -0.01em;
        }
        /* Only the handful of h3s that carry a leading .icon span get the
           flex alignment; plain-text h3s stay as normal block headings. */
        .doc-section h3:has(> .icon) { display: flex; align-items: center; gap: 0.5rem; }
        .doc-section h3 .icon { font-size: 1.1rem; line-height: 1; flex-shrink: 0; }
        /* Sub-head under an h3, for a worked example or a sidebar within one
           topic. Deliberately close to body weight so it reads as part of the
           h3 above it rather than as a new topic. */
        .doc-section h4 {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--pbs-text);
            margin-top: 1.1rem;
            margin-bottom: 0.4rem;
        }
        /* First heading inside a section already has the card's top padding,
           so don't double up the top margin on it. */
        .doc-section > h2:first-child,
        .doc-section > h3:first-child { margin-top: 0; }
        .doc-section p { color: var(--pbs-text-2); margin-bottom: 0.8rem; }
        .doc-section p:last-child { margin-bottom: 0; }
        .doc-section ul, .doc-section ol { padding-left: 1.5rem; margin-bottom: 0.85rem; }
        .doc-section li { color: var(--pbs-text-2); margin-bottom: 0.45rem; line-height: 1.6; }
        .doc-section li strong, .doc-section p strong { color: var(--pbs-text); font-weight: 700; }
        .doc-section code {
            background: var(--pbs-inset);
            border: 1px solid var(--pbs-border-soft);
            border-radius: 4px;
            padding: 1px 6px;
            font-family: var(--pbs-mono);
            font-size: 0.85em;
            color: var(--pbs-text);
        }
        .doc-section kbd {
            background: var(--pbs-inset);
            border: 1px solid var(--pbs-border);
            border-bottom-width: 2px;
            border-radius: 4px;
            padding: 1px 6px;
            font-family: var(--pbs-mono);
            font-size: 0.82em;
            color: var(--pbs-text);
        }
        .doc-section em { color: var(--pbs-text); font-style: italic; }
        .doc-section blockquote {
            margin: 0.75rem 0;
            padding: 0.5rem 0 0.5rem 0.9rem;
            border-left: 2px solid var(--pbs-accent);
            color: var(--pbs-text-2);
        }

        /* Group dividers in main content */
        .group-heading {
            font-size: 11px;
            font-weight: 800;
            color: var(--pbs-text-2);
            text-transform: uppercase;
            letter-spacing: 0.22em;
            margin: 2.5rem 0 1.1rem;
            padding-bottom: 0.55rem;
            border-bottom: 1px solid var(--pbs-border-soft);
        }
        .group-heading:first-of-type { margin-top: 0.5rem; }

        /* Stat callouts, mapped to design-token pills */
        .stat-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
        .stat-pill {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 10px;
            border-radius: var(--pbs-r-pill);
            background: rgba(79, 157, 255, .12);
            border: 1px solid rgba(79, 157, 255, .35);
            font-size: 12px; font-weight: 700;
            color: var(--pbs-accent);
        }
        .stat-pill.gold {
            background: rgba(240, 199, 90, .12);
            border-color: rgba(240, 199, 90, .35);
            color: var(--pbs-gold);
        }
        .stat-pill.green {
            background: rgba(52, 214, 113, .12);
            border-color: rgba(52, 214, 113, .35);
            color: var(--pbs-green-deep);
        }
        .stat-pill.purple {
            background: rgba(162, 121, 255, .12);
            border-color: rgba(162, 121, 255, .35);
            color: var(--pbs-purple);
        }

        /* Tips */
        .tip-box {
            background: rgba(79, 157, 255, .08);
            border: 1px solid rgba(79, 157, 255, .25);
            border-left: 3px solid var(--pbs-accent);
            border-radius: var(--pbs-r-sm);
            padding: 0.95rem 1.1rem;
            margin: 1.15rem 0;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--pbs-text-2);
        }
        .tip-box > :first-child { margin-top: 0; }
        .tip-box > :last-child { margin-bottom: 0; }
        .tip-box p { margin-bottom: 0.5rem; }
        .tip-box strong { color: var(--pbs-text); }
        .tip-box a { color: var(--pbs-accent-2); }

        /* Tables */
        .level-table {
            width: 100%;
            border-collapse: collapse;
            margin: 1rem 0;
            font-size: 0.9rem;
        }
        .level-table th {
            text-align: left;
            padding: 0.55rem 0.9rem;
            background: var(--pbs-inset);
            color: var(--pbs-text-2);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 800;
            border-bottom: 1px solid var(--pbs-border);
        }
        .level-table td {
            padding: 0.55rem 0.9rem;
            border-bottom: 1px solid var(--pbs-border-soft);
            color: var(--pbs-text-2);
        }
        .level-table tr:last-child td { border-bottom: none; }

        /* Footer */
        .docs-footer {
            text-align: center; padding: 2rem;
            color: var(--pbs-muted);
            font-size: 0.8rem;
            border-top: 1px solid var(--pbs-border-soft);
            margin-top: 2rem;
        }
        .docs-footer a { color: var(--pbs-text-2); }
        .docs-footer a:hover { color: var(--pbs-text); }

        @media (max-width: 640px) {
            nav.top .inner { padding: 12px 16px; }
            .docs-layout { padding: 1.25rem 1rem 3rem; }
            .docs-container h1 { font-size: 1.7rem; }
            .doc-section { padding: 1.25rem; }
            .stat-row { gap: 0.4rem; }
            /* Wide reference tables stack into cards on a phone: each row becomes a
               block, the header row is dropped, and cells carry their own labels
               (data-l) so nothing squeezes into one-word-per-line columns. */
            table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; box-sizing: border-box; }
            table.stack-sm tr:first-child { display: none; }
            table.stack-sm tr { border: 1px solid var(--pbs-border); border-radius: 10px; margin-bottom: 0.6rem; padding: 0.3rem 0; }
            table.stack-sm td { border-bottom: none; padding: 0.22rem 0.75rem; }
            table.stack-sm td:first-child { font-size: 1rem; padding-top: 0.45rem; }
            table.stack-sm td[data-l]::before { content: attr(data-l) ": "; font-weight: 700; color: var(--pbs-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; }
        }
    

                .docs-cast-grid {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                    gap: 1.25rem;
                    margin: 1.25rem 0;
                }
                .docs-cast-card {
                    background: var(--bg-card);
                    border: 1px solid var(--border);
                    border-radius: 12px;
                    padding: 1.1rem;
                }
                .docs-cast-card h4 { color: var(--text-heading); font-size: 1rem; }
                .docs-cast-card p { font-size: 0.85rem; line-height: 1.45; margin: 0 0 0.5rem; }
                .docs-cast-card p:last-child { margin-bottom: 0; }
                

                    /* Scoped to this section only, no leaks into other
                       parts of /docs. All colours read from the doc page
                       theme where possible. */
                    .rhythm-wrap {
                        background: var(--bg-card, #fff);
                        border: 1px solid var(--border, #d8d4ca);
                        border-radius: 14px;
                        padding: 1.25rem 1.25rem 1rem;
                        margin: 1rem 0 1.5rem;
                        position: relative;
                        overflow: hidden;
                    }
                    .rhythm-wrap::before {
                        content: ""; position: absolute; inset: 0;
                        background: radial-gradient(circle at 85% 10%, rgba(236,72,153,0.06), transparent 60%),
                                    radial-gradient(circle at 5% 90%, rgba(96,165,250,0.05), transparent 55%);
                        pointer-events: none;
                    }
                    .rhythm-svg-outer { position: relative; }
                    .rhythm-svg { width: 100%; height: auto; display: block; }
                    .rhythm-phases {
                        display: grid;
                        grid-template-columns: repeat(3, 1fr);
                        gap: 0.85rem;
                        margin-top: 1.2rem;
                    }
                    .rhythm-phase {
                        border: 1px solid var(--border, #d8d4ca);
                        border-radius: 10px;
                        padding: 0.85rem 0.95rem 0.95rem;
                        background: var(--bg-inset, rgba(0,0,0,0.025));
                        position: relative;
                    }
                    .rhythm-phase .rph-head {
                        display: flex; align-items: baseline; gap: 0.5rem;
                        margin-bottom: 0.35rem;
                    }
                    .rhythm-phase .rph-icon { font-size: 1.15rem; }
                    .rhythm-phase .rph-title {
                        font-weight: 800; font-size: 1rem;
                        color: var(--text-heading, #1a2433);
                    }
                    .rhythm-phase .rph-time {
                        margin-left: auto;
                        font-size: 0.7rem; font-weight: 700;
                        color: var(--text-muted, #8a96a5);
                        font-variant-numeric: tabular-nums;
                        padding: 0.1rem 0.45rem;
                        border-radius: 999px;
                        border: 1px solid var(--border, #d8d4ca);
                        background: var(--bg-card, #fff);
                    }
                    .rhythm-phase .rph-sub {
                        font-size: 0.82rem; line-height: 1.4;
                        color: var(--text-secondary, #506273);
                        margin: 0.15rem 0 0.6rem;
                    }
                    .rhythm-phase ul {
                        margin: 0; padding-left: 1.1rem;
                        font-size: 0.78rem; line-height: 1.5;
                    }
                    .rhythm-phase ul li { margin-bottom: 0.1rem; }
                    .rhythm-morning   { border-top: 3px solid #60a5fa; }
                    .rhythm-afternoon { border-top: 3px solid #f59e0b; }
                    .rhythm-night     { border-top: 3px solid #ec4899; }
                    .rhythm-legend {
                        display: flex; gap: 0.9rem; flex-wrap: wrap;
                        margin-top: 0.3rem; font-size: 0.72rem;
                        color: var(--text-secondary, #506273);
                    }
                    .rhythm-legend .swatch {
                        display: inline-block; width: 10px; height: 10px;
                        border-radius: 3px; margin-right: 0.35rem;
                        vertical-align: middle;
                    }
                    @media (max-width: 720px), (pointer: coarse) {
                        .rhythm-phases { grid-template-columns: 1fr; }
                    }
                

        .doc-feedback {
            margin-top: 1.25rem; padding-top: 0.85rem;
            border-top: 1px solid var(--pbs-border-soft);
            display: flex; align-items: center; gap: 0.5rem;
            font-size: 12px; color: var(--pbs-muted);
            font-weight: 700;
            letter-spacing: 0.04em;
        }
        .doc-feedback button {
            background: var(--pbs-inset);
            border: 1px solid var(--pbs-border);
            color: var(--pbs-text);
            border-radius: var(--pbs-r-pill);
            padding: 0.3rem 0.7rem;
            cursor: pointer;
            font-size: 0.95rem;
            line-height: 1;
            transition: border-color .15s, transform .12s;
        }
        .doc-feedback button:hover {
            border-color: var(--pbs-accent);
            transform: translateY(-1px);
        }
        .doc-feedback .df-result {
            color: var(--pbs-green-deep);
            font-weight: 700;
            letter-spacing: 0;
            text-transform: none;
        }
        .docs-collapse {
            margin-top: 0.5rem;
            border: 1px solid var(--pbs-border-soft);
            border-radius: var(--pbs-r-sm);
            padding: 0.6rem 0.9rem;
            background: rgba(11, 15, 23, .35);
        }
        .docs-collapse summary {
            cursor: pointer;
            font-size: 12px;
            font-weight: 800;
            color: var(--pbs-text-2);
            text-transform: uppercase;
            letter-spacing: 0.18em;
            list-style: none;
        }
        .docs-collapse[open] summary { color: var(--pbs-text); margin-bottom: 0.6rem; }
        .docs-collapse summary::-webkit-details-marker { display: none; }
        .doc-try-it {
            display: inline-block; margin-top: 0.3rem;
            font-size: 0.78rem; font-weight: 700;
            color: var(--pbs-accent);
        }