/* public/css/rules_page.css */

.rule-content { padding: 10px; }
.rule-content h1 { display: flex; align-items: center; gap: 10px; color: #4CAF50; border-bottom: 2px solid #444; padding-bottom: 10px; }
.rule-content h1 .rule-header-icon { font-size: 36px; }
.rule-intro { font-size: 1.1em; color: #ddd; margin: 20px 0; }

.rule-section-title { display: flex; align-items: center; gap: 8px; color: #ccc; background-color: #3a3a3c; padding: 10px; border-radius: 5px; margin-top: 30px; }
.rule-content ul { list-style-type: square; margin-left: 20px; }
.rule-content li { margin-bottom: 10px; }

.rule-tiers-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; }
.tier-card { padding: 8px 12px; border-radius: 20px; color: #fff; font-size: 0.9em; }
.tier-elite { background-color: #ffd700; color: #333; }
.tier-contenders { background-color: #c0c0c0; color: #333; }
.tier-aspirants { background-color: #cd7f32; }
.tier-division { background-color: #4a5568; }
.tier-unranked { background-color: #2d3748; }

.rule-table { width: 100%; border-collapse: collapse; margin-top: 15px; }
.rule-table th, .rule-table td { border: 1px solid #444; padding: 12px; text-align: left; }
.rule-table th { background-color: #3a3a3c; }
.rule-table .points-win { color: #66bb6a; font-weight: bold; }
.rule-table .points-loss { color: #ef5350; font-weight: bold; }
.rule-table .win-text, .rule-table .loss-text, .rule-table .penalty-text { font-weight: bold; }
.rule-table .separator-row td { padding: 2px; border: none; background: none; }

.rule-content h3 { display: flex; align-items: center; gap: 8px; color: #ffa726; margin-top: 25px; }