/* CrystalTales Rules — dedicated stylesheet */
#rules.rules-section .rules-tabs{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 auto 26px !important;
  flex-wrap:wrap !important;
}
#rules.rules-section .rules-tab{
  appearance:none !important;
  -webkit-appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  min-width:170px !important;
  padding:12px 18px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:12px !important;
  background:rgba(255,255,255,.025) !important;
  color:#9da3b3 !important;
  font:800 12px/1.2 Manrope,system-ui,sans-serif !important;
  cursor:pointer !important;
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease !important;
}
#rules.rules-section .rules-tab span{
  color:#686f82 !important;
  margin-left:6px !important;
  font-size:10px !important;
}
#rules.rules-section .rules-tab:hover{
  background:rgba(255,255,255,.055) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}
#rules.rules-section .rules-tab.active{
  color:#fff !important;
  border-color:rgba(139,92,246,.45) !important;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(79,124,255,.11)) !important;
  box-shadow:0 12px 35px rgba(70,65,170,.13) !important;
}
#rules.rules-section .rules-tab.active span{color:#a991ff !important}

#rules.rules-section .rules-panel{display:none !important}
#rules.rules-section .rules-panel.active{display:block !important;animation:ctRulesIn .35s ease !important}
#rules.rules-section .rules-panel[hidden]{display:none !important}
@keyframes ctRulesIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

#rules.rules-section .rules-panel-head{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:25px !important;
  padding:24px 26px !important;
  margin-bottom:14px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.025) !important;
}
#rules.rules-section .rules-panel-head>div{
  display:flex !important;
  align-items:center !important;
  gap:13px !important;
}
#rules.rules-section .rules-panel-head>div>span{
  display:inline-block !important;
  font-size:10px !important;
  color:#8170d8 !important;
  font-weight:900 !important;
  letter-spacing:1px !important;
}
#rules.rules-section .rules-panel-head h3{
  margin:0 !important;
  font-size:19px !important;
  line-height:1.2 !important;
}
#rules.rules-section .rules-panel-head p{
  margin:0 !important;
  color:#777e90 !important;
  font-size:11px !important;
  line-height:1.5 !important;
  text-align:right !important;
}

#rules.rules-section .rules-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
#rules.rules-section .rule-card{
  position:relative !important;
  display:block !important;
  padding:23px 23px 20px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:17px !important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)) !important;
  overflow:hidden !important;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease !important;
}
#rules.rules-section .rule-card:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;top:0 !important;
  width:3px !important;height:100% !important;
  background:linear-gradient(180deg,#9b7cff,#4e78ff) !important;
  opacity:.75 !important;
}
#rules.rules-section .rule-card.ban:before{
  background:linear-gradient(180deg,#ff6b87,#8b5cf6) !important;
}
#rules.rules-section .rule-card:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(139,92,246,.32) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.18) !important;
}
#rules.rules-section .rule-id{
  display:block !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:#9b7cff !important;
  letter-spacing:1px !important;
  margin-bottom:10px !important;
}
#rules.rules-section .rule-card.ban .rule-id{color:#ff8ba3 !important}
#rules.rules-section .rule-card h4{
  display:block !important;
  margin:0 !important;
  min-height:44px !important;
  font-size:13px !important;
  line-height:1.55 !important;
  color:#e7e9ef !important;
  font-weight:700 !important;
}
#rules.rules-section .rule-punishment{
  margin-top:18px !important;
  padding-top:14px !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  display:flex !important;
  align-items:baseline !important;
  justify-content:space-between !important;
  gap:14px !important;
}
#rules.rules-section .rule-punishment span{
  font-size:9px !important;
  text-transform:uppercase !important;
  letter-spacing:1.5px !important;
  color:#666d80 !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#rules.rules-section .rule-punishment b{
  font-size:11px !important;
  line-height:1.45 !important;
  color:#bca9ff !important;
  text-align:right !important;
}
#rules.rules-section .rule-card.ban .rule-punishment b{color:#ff9db0 !important}

@media(max-width:700px){
  #rules.rules-section .rules-grid{grid-template-columns:1fr !important}
  #rules.rules-section .rules-panel-head{display:block !important}
  #rules.rules-section .rules-panel-head p{text-align:left !important;margin-top:8px !important}
}
@media(max-width:560px){
  #rules.rules-section .rules-tab{width:100% !important;min-width:0 !important}
  #rules.rules-section .rules-panel-head{padding:20px !important}
  #rules.rules-section .rule-card{padding:20px !important}
  #rules.rules-section .rule-punishment{display:block !important}
  #rules.rules-section .rule-punishment b{display:block !important;text-align:left !important;margin-top:6px !important}
}