/* ==========================================================
   LIVRO DE REGRAS
========================================================== */

.rules-page{

    max-width:920px;

}

.rules-section{

    margin-bottom:20px;

    padding:28px 32px;

}

.rules-section h2{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:1.2rem;

    margin-bottom:16px;

    padding-bottom:10px;

    border-bottom:1px solid var(--border);

}

.rules-list{

    display:flex;

    flex-direction:column;

    gap:10px;

    color:var(--text-secondary);

    font-size:.92rem;

    line-height:1.6;

    list-style:disc;

    padding-left:20px;

}

.rules-list strong{

    color:var(--text);

}

.rules-list ul{

    list-style:circle;

    padding-left:20px;

    margin-top:8px;

    display:flex;

    flex-direction:column;

    gap:6px;

}

.rules-list-spaced{

    margin-top:18px;

}

/* ===== Ordem do turno ===== */

.rules-steps{

    counter-reset:step;

    display:flex;

    flex-direction:column;

    gap:8px;

    list-style:none;

}

.rules-steps li{

    counter-increment:step;

    display:flex;

    align-items:baseline;

    gap:14px;

    color:var(--text);

    font-size:.92rem;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:10px;

    padding:10px 16px;

}

.rules-steps li::before{

    content:counter(step);

    font-family:"Cinzel",serif;

    font-weight:700;

    color:var(--gold);

    min-width:22px;

    text-align:center;

}

.rules-steps em{

    color:var(--text-secondary);

    font-size:.82rem;

}

/* ===== Diagrama do campo ===== */

.field-diagram{

    margin-top:22px;

    padding:20px;

    background:var(--panel-light);

    border:1px solid var(--border);

    border-radius:12px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

}

.field-diagram-label{

    font-size:.72rem;

    text-transform:uppercase;

    letter-spacing:1px;

    color:var(--text-secondary);

}

.field-side-label{

    font-size:.8rem;

    color:var(--text-secondary);

}

.field-board{

    display:flex;

    gap:26px;

    justify-content:center;

    flex-wrap:wrap;

    max-width:100%;

}

.field-column{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.field-grid{

    display:grid;

    grid-template-columns:repeat(2,42px);

    gap:8px;

}

.field-slot{

    width:42px;

    height:54px;

    border:1px dashed var(--border);

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:"Cinzel",serif;

    font-size:.85rem;

    color:var(--gold);

    background:var(--panel);

}

.field-region{

    width:46px;

    height:60px;

    border-radius:8px;

    background:linear-gradient(160deg,var(--gold),var(--purple));

    color:#111;

    font-size:.5rem;

    font-weight:700;

    letter-spacing:.5px;

    text-transform:uppercase;

    display:flex;

    align-items:center;

    justify-content:center;

}

.field-vs{

    font-size:.75rem;

    color:var(--gold);

    letter-spacing:.5px;

}

/* ===== Palavras-chave ===== */

.keyword-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));

    gap:14px;

}

.keyword-card{

    background:var(--panel-light);

    border:1px solid var(--border);

    border-left:3px solid var(--gold);

    border-radius:10px;

    padding:16px;

}

.keyword-card h3{

    font-family:"Cinzel",serif;

    color:var(--gold);

    font-size:.92rem;

    margin-bottom:8px;

}

.keyword-card p{

    color:var(--text-secondary);

    font-size:.83rem;

    line-height:1.55;

}

.keyword-card strong,
.keyword-card em{

    color:var(--text);

}

/* ===== Fecho ===== */

.rules-footer{

    text-align:center;

}

.rules-quote{

    font-family:"Cinzel",serif;

    color:var(--text);

    font-size:1.05rem;

    margin-bottom:12px;

}

.rules-quote strong{

    color:var(--gold);

}

.rules-fineprint{

    color:var(--text-secondary);

    font-size:.8rem;

    line-height:1.6;

}