/* ==========================================================================
   RULES STYLES
   Extends css/style.css.
   ========================================================================== */

.rules-page{max-width:900px; margin:0 auto; padding:80px 5% 0;}
.rules-list{display:flex; flex-direction:column; gap:20px;}
.rules-item{
  padding:24px 28px; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.rules-item h3{font-family:var(--font-display); font-size:1.02rem; margin-bottom:10px;}
.rules-item p{color:var(--text-dim); font-size:0.88rem; line-height:1.8;}

.rules-tiers{margin-top:120px;}
.tier-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:20px;}
.tier-card{
  padding:24px; border-radius:12px; text-align:center;
  border:1px solid var(--border); background:linear-gradient(160deg, var(--panel), var(--bg-alt));
}
.tier-badge{
  display:inline-block; padding:4px 14px; border-radius:20px;
  font-size:0.65rem; font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px;
}
.tier-badge.warn{color:var(--text-dim); border:1px solid var(--border); background:rgba(142,162,179,0.06);}
.tier-badge.short{color:#ffd98f; border:1px solid rgba(255,217,143,0.4); background:rgba(255,217,143,0.08);}
.tier-badge.long{color:#ffb98f; border:1px solid rgba(255,140,90,0.45); background:rgba(255,140,90,0.08);}
.tier-badge.perm{color:#ff8a8a; border:1px solid rgba(255,110,110,0.4); background:rgba(255,110,110,0.08);}
.tier-card h3{font-family:var(--font-display); font-size:1rem; margin-bottom:10px;}
.tier-card p{color:var(--text-dim); font-size:0.82rem; line-height:1.7;}

.rules-appeal{
  text-align:center; margin-top:120px; padding:70px 5% 150px; margin-left:-5%; margin-right:-5%;
  background:radial-gradient(ellipse at 50% 50%, rgba(111,216,255,0.08), transparent 65%), var(--bg-alt);
}
.rules-appeal h2{font-family:var(--font-display); font-size:clamp(1.7rem,3.4vw,2.4rem); margin-top:16px;}
.rules-appeal p{color:var(--text-dim); margin-top:16px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.8;}