.rules-document{
    max-width:980px;
    margin-inline:auto;
}

.rules-reading-intro {
    max-width: 980px;
    margin: 0 auto 34px;
    padding: clamp(30px, 5vw, 66px);
    border-left: 3px solid #9a7043;
    color: #f6efdf;
    background:
        linear-gradient(90deg, rgba(15, 18, 16, .9), rgba(15, 18, 16, .38)),
        url("../../assets/trpg-library.png") center / cover no-repeat;
}

.rules-reading-intro .section-label { color:#e6c584; }
.rules-reading-intro h1 { margin:10px 0 14px; color:#fff7e8; font-family:Georgia,"Noto Serif JP",serif; font-size:clamp(2rem,4vw,4rem); font-weight:500; letter-spacing:-.04em; line-height:1.1; }
.rules-reading-intro p:not(.section-label) { max-width:560px; margin:0; color:rgba(255,247,232,.78); line-height:1.9; }
.rules-document { border-color:var(--color-border); border-radius:2px; background:linear-gradient(135deg,var(--color-panel-strong),var(--color-panel-soft)); box-shadow:8px 10px 0 color-mix(in srgb,var(--creator-accent) 9%,transparent); }.rules-system-hero,.rules-toc,.rule-section { border-radius:2px; }.rules-system-hero { background:var(--color-surface); }.rule-section { background:var(--color-panel-strong); }.rule-section-summary { font-family:Georgia,"Noto Serif JP",serif; }
@media(max-width:640px){.rules-reading-intro{margin-bottom:18px;padding:30px 22px}.rules-reading-intro h1{font-size:clamp(1.9rem,9vw,3rem)}}

.rules-system{
    display:grid;
    gap:22px;
}

.rules-system + .rules-system{
    margin-top:34px;
    padding-top:28px;
    border-top:1px solid var(--color-border);
}

.rules-system-hero{
    display:grid;
    gap:10px;
    padding:18px;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:var(--color-surface);
}

.rules-system-meta{
    margin:0;
    color:var(--color-muted);
    font-size:13px;
    font-weight:800;
    letter-spacing:.02em;
}

.rules-system-hero h2{
    margin:0;
    color:var(--color-text);
    font-size:clamp(22px,4vw,32px);
    line-height:1.35;
}

.rules-system-description{
    max-width:72ch;
    margin:0;
    color:var(--color-muted);
    font-size:14px;
    line-height:1.8;
}

.rules-toc{
    display:grid;
    gap:12px;
    padding:16px;
    border:1px solid var(--color-border);
    border-radius:16px;
    background:var(--color-panel);
}

.rules-toc h3{
    margin:0;
    color:var(--color-text);
    font-size:16px;
}

.rules-toc-list{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:8px;
}

.rules-toc-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:42px;
    padding:9px 11px;
    border:1px solid var(--color-border);
    border-radius:12px;
    color:var(--color-text);
    background:var(--color-surface);
    text-decoration:none;
}

.rules-toc-link:hover{
    border-color:var(--color-border-accent);
    background:var(--color-accent-soft);
}

.rules-toc-link small{
    flex:0 0 auto;
    color:var(--color-muted);
    font-size:12px;
    font-weight:800;
}

.rules-category{
    display:grid;
    gap:10px;
    scroll-margin-top:18px;
}

.rules-category-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-bottom:8px;
    border-bottom:1px solid var(--color-border);
}

.rules-category-head h3{
    margin:0;
    color:var(--color-text);
    font-size:20px;
}

.rules-category-head p{
    margin:0;
    color:var(--color-muted);
    font-size:13px;
    font-weight:800;
}

.rule-section{
    border:1px solid var(--color-border);
    border-radius:15px;
    background:var(--color-surface);
    overflow:hidden;
}

.rule-section[open]{
    border-color:var(--color-border-accent);
}

.rule-section-summary{
    display:grid;
    grid-template-columns:1.25rem auto minmax(0,1fr) auto;
    gap:0.55rem 0.75rem;
    align-items:center;
    min-height:56px;
    padding:14px 16px;
    color:var(--color-text);
    cursor:pointer;
    list-style:none;
    overflow:visible;
    line-height:1.35;
}

.rule-section-summary::marker{
    content:"";
}

.rule-section-summary::-webkit-details-marker{
    display:none;
}

.rule-section-marker{
    display:inline-grid;
    place-items:center;
    width:1.25rem;
    height:1.25rem;
    color:var(--color-muted);
    font-size:12px;
    line-height:1;
    overflow:visible;
    transform-origin:center;
    transition:transform .18s ease;
}

.rule-section[open] .rule-section-marker{
    transform:rotate(90deg);
}

.rule-section-number{
    align-self:center;
    color:var(--color-accent);
    font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
    font-size:13px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}

.rule-section-title{
    min-width:0;
    overflow-wrap:anywhere;
    font-size:15px;
    font-weight:800;
    line-height:1.45;
}

.rule-section-category{
    display:inline-flex;
    align-items:center;
    justify-self:end;
    min-height:26px;
    max-width:min(18rem, 100%);
    padding:4px 9px;
    border-radius:999px;
    color:var(--color-muted);
    background:var(--color-panel);
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    overflow-wrap:anywhere;
    text-align:center;
}

.rules-content{
    padding:0 18px 18px 44px;
}

.rules-content p,
.rules-content ul{
    color:var(--color-text);
    font-size:15px;
    line-height:1.9;
}

.rules-content p{
    margin:0 0 14px;
}

.rules-content ul{
    margin:0 0 14px;
    padding-left:20px;
}

.rules-content li{
    margin-bottom:5px;
}

.rules-muted{
    color:var(--color-muted);
}

@media(max-width:640px){
    .rules-document{
        padding-inline:14px;
    }

    .rules-system-hero,
    .rules-toc{
        padding:14px;
    }

    .rules-toc-list{
        grid-template-columns:1fr;
    }

    .rules-category-head{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .rule-section-summary{
        grid-template-columns:1.25rem auto minmax(0,1fr);
        gap:6px 8px;
        padding:12px 13px;
    }

    .rule-section-marker{
        grid-row:1 / span 2;
        align-self:start;
        margin-top:1px;
    }

    .rule-section-number{
        grid-column:2;
    }

    .rule-section-title{
        grid-column:3;
    }

    .rule-section-category{
        grid-column:2 / -1;
        justify-self:start;
        width:fit-content;
        text-align:left;
    }

    .rules-content{
        padding:0 13px 15px 35px;
    }

    .rules-content p,
    .rules-content ul{
        font-size:14px;
        line-height:1.85;
    }
}
.rules-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.rules-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--border);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 84%, var(--accent-soft));
    font-size: 0.86rem;
    font-weight: 800;
    text-decoration: none;
}

.rules-toc a:hover,
.rules-toc a:focus-visible {
    border-color: var(--accent);
    color: var(--accent-ink);
}

.rules-document h2[id] {
    scroll-margin-top: 150px;
}