#rules-modal{
display:none;
}
#rules-modal.show{
display:flex;
}
#rules-modal .legal-modal-body{
max-height:calc(85vh - 80px);
overflow-y:auto;
}
.rules-modal-header{
background:linear-gradient(135deg,rgba(74,158,255,0.15) 0%,rgba(59,130,246,0.15) 100%);
border-bottom:1px solid rgba(74,158,255,0.3);
padding:20px 24px;
display:flex;
align-items:center;
justify-content:space-between;
position:relative;
}
.rules-header-content{
display:flex;
align-items:center;
gap:12px;
flex:1;
}
.rules-header-icon{
font-size:24px;
color:#4a9eff;
animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
0%,100%{
transform:scale(1);
opacity:1;
}
50%{
transform:scale(1.05);
opacity:0.8;
}
}
.rules-modal-header h2{
margin:0;
font-size:18px;
font-weight:600;
color:white;
}
.rules-modal-header .legal-modal-close{
position:relative;
top:auto;
right:auto;
width:36px;
height:36px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.2);
border-radius:8px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.rules-modal-header .legal-modal-close svg{
width:18px;
height:18px;
stroke-width:2.5;
}
.rules-modal-header .legal-modal-close:hover{
background:rgba(239,68,68,0.2);
border-color:rgba(239,68,68,0.4);
}
.rules-modal-header .legal-modal-close:hover svg{
stroke:#ef4444;
}
@media(max-width:640px){
.rules-modal-header{
padding:16px 20px;
}
.rules-modal-header h2{
font-size:16px;
}
.rules-header-icon{
font-size:20px;
}
}
.rules-intro{
padding:20px;
background:rgba(74,158,255,0.1);
border-radius:8px;
margin-bottom:24px;
border-left:3px solid #4a9eff;
}
.rules-intro p{
margin:0;
color:rgba(255,255,255,0.9);
font-size:15px;
line-height:1.6;
}
.rules-list{
display:flex;
flex-direction:column;
gap:12px;
}
.rule-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:12px 16px;
background:rgba(255,255,255,0.03);
border-radius:8px;
border:1px solid rgba(255,255,255,0.08);
transition:all 0.2s ease;
}
.rule-item:hover{
background:rgba(255,255,255,0.05);
border-color:rgba(74,158,255,0.3);
transform:translateX(4px);
}
.rule-number{
flex-shrink:0;
padding:4px 10px;
background:rgba(74,158,255,0.2);
color:#4a9eff;
border-radius:6px;
font-size:12px;
font-weight:700;
letter-spacing:0.5px;
}
.rule-text{
color:rgba(255,255,255,0.9);
font-size:14px;
line-height:1.6;
flex:1;
}
.rules-footer{
margin-top:32px;
padding:20px;
background:rgba(239,68,68,0.1);
border-radius:8px;
border-left:3px solid #ef4444;
}
.rules-footer p{
margin:0 0 8px 0;
color:rgba(255,255,255,0.9);
font-size:14px;
line-height:1.6;
}
.rules-footer p:last-child{
margin:0;
margin-top:12px;
font-size:15px;
}
@media(max-width:768px){
.rule-item{
flex-direction:column;
gap:8px;
}
.rule-number{
align-self:flex-start;
}
}

@media(max-width:640px){
#rules-modal.legal-modal-overlay{
padding:0 !important;
align-items:flex-end !important;
}
#rules-modal .legal-modal-content{
width:100vw !important;
max-width:none !important;
max-height:none !important;
height:100vh !important;
border-radius:0 !important;
border:none !important;
box-shadow:none !important;
animation:rulesModalSlideUp 0.3s ease-out !important;
transform:none !important;
left:0 !important;
top:0 !important;
position:fixed !important;
z-index:9999 !important;
}
#rules-modal .legal-modal-body{
max-height:calc(100vh - 80px) !important;
overflow-y:auto !important;
}
@keyframes rulesModalSlideUp{
from{
transform:translateY(100%);
}
to{
transform:translateY(0);
}
}
@keyframes rulesModalSlideDown{
from{
transform:translateY(0);
}
to{
transform:translateY(100%);
}
}
}

#rules-modal .legal-modal-close{
z-index:10000;
}