/* AXIS RULES PAGE */

.rules-page{
  margin:0;
  padding:0 0 70px;
  background:#03101a;
  color:#fff;
}
.rules-hero{
  position:relative;
  height:640px;
  overflow:hidden;
  background:url("../img/axis-rule-bg.png?v=2") center 47% / cover no-repeat;
  border:0;
  border-bottom:0 !important;
  box-shadow:none;
}

.rules-hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
linear-gradient(
  180deg,
  rgba(0,5,10,.04) 0%,
  rgba(0,8,14,.08) 34%,
  rgba(2,9,15,.30) 58%,
  rgba(2,9,15,.68) 74%,
  rgba(3,16,26,.94) 90%,
  #03101a 100%
)
    radial-gradient(
      circle at 50% 42%,
      rgba(0,0,0,0),
      rgba(0,0,0,.28) 82%
    );
}

.rules-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:275px;
  z-index:1;
  pointer-events:none;
 background:
  linear-gradient(
    180deg,
    rgba(3,16,26,0) 0%,
    rgba(3,16,26,.18) 24%,
    rgba(3,16,26,.48) 52%,
    rgba(3,16,26,.78) 76%,
    #03101a 100%
  );
}

.rules-hero-content{
  position:relative;
  z-index:2;
  box-sizing:border-box;
  height:100%;
  padding-top:165px;
  text-align:center;
  text-shadow:0 4px 14px rgba(0,0,0,.85),0 0 22px rgba(0,0,0,.80);
}

.rules-hero-content .eyebrow{
  margin:0 0 7px;
  color:#65d8ff;
  font-size:13px;
  font-weight:900;
  letter-spacing:4px;
}

.rules-hero-content h1{
  margin:0;
  color:#fff;
  font-size:clamp(42px,4vw,64px);
  line-height:.92;
  font-weight:950;
  letter-spacing:5px;
}

.rules-hero-content p{
  margin:15px 0 4px;
  color:#eef7fb;
  font-size:18px;
  font-weight:900;
  letter-spacing:1.4px;
}

.rules-hero-content strong{
  color:#27aaff;
  font-size:18px;
  font-weight:950;
  letter-spacing:1.6px;
}

.rules-wrap{
  position:relative;
  z-index:5;
  width:min(1360px,calc(100% - 40px));
  margin:-315px auto 0;
}

.rules-panel{
  position:relative;
  padding:30px 28px 28px;
  background:
    radial-gradient(circle at 50% 0%,rgba(16,126,190,.08),transparent 34%),
    linear-gradient(180deg,rgba(4,17,28,.98),rgba(2,10,18,.985));
  border:1px solid rgba(35,180,255,.72);
  clip-path:polygon(
    20px 0,
    calc(100% - 20px) 0,
    100% 20px,
    100% calc(100% - 20px),
    calc(100% - 20px) 100%,
    20px 100%,
    0 calc(100% - 20px),
    0 20px
  );
  box-shadow:
    0 26px 45px rgba(0,0,0,.50),
    0 0 22px rgba(0,147,220,.16),
    inset 0 0 38px rgba(0,100,160,.05);
}

.rules-panel::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(46,179,235,.18);
  clip-path:inherit;
}

.panel-topline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  margin-bottom:24px;
}

.panel-topline span{
  height:2px;
  background:linear-gradient(90deg,transparent,#1db9ff 45%,transparent);
  box-shadow:0 0 8px rgba(29,185,255,.50);
}

.panel-topline h2{
  margin:0;
  color:#eaf7ff;
  font-size:28px;
  font-weight:950;
  letter-spacing:2px;
  text-shadow:0 0 10px rgba(36,174,255,.25);
}

.rules-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.rules-column{
  display:grid;
  gap:16px;
}

.rule-card{
  position:relative;
  min-height:124px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:112px 1fr;
  align-items:center;
  gap:18px;
  padding:12px 18px 12px 12px;
  background:linear-gradient(135deg,rgba(7,25,38,.96),rgba(3,12,21,.98));
  border:1px solid rgba(67,139,176,.30);
  clip-path:polygon(
    14px 0,
    calc(100% - 14px) 0,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%,
    0 calc(100% - 14px),
    0 14px
  );
  box-shadow:inset 0 0 20px rgba(0,91,139,.04),0 10px 18px rgba(0,0,0,.20);
}

.rule-card::after{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  bottom:18%;
  width:2px;
  background:linear-gradient(180deg,transparent,#1db8ff,transparent);
  box-shadow:0 0 8px rgba(29,184,255,.50);
}

.rule-icon{
  width:96px;
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.rule-icon img{
  display:block;
  width:92px;
  height:92px;
  object-fit:contain;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.36)) drop-shadow(0 0 8px rgba(17,162,255,.25));
}

.rule-copy h3{
  margin:0 0 8px;
  color:#f3f8fb;
  font-size:20px;
  line-height:1.05;
  font-weight:950;
  letter-spacing:.5px;
}

.rule-copy p{
  margin:0;
  color:#bdcbd4;
  font-size:14px;
  line-height:1.45;
}

.rule-warning{
  position:relative;
  min-height:190px;
  margin-top:18px;
  overflow:hidden;
  display:grid;
  grid-template-columns:165px 1fr;
  align-items:center;
  gap:18px;
  padding:20px 40px 20px 20px;
  border:1px solid rgba(120,140,154,.38);
  clip-path:polygon(
    18px 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  );
  box-shadow:0 22px 36px rgba(0,0,0,.45),0 0 16px rgba(255,55,44,.09);
}

.warning-bg{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(90deg,rgba(3,7,10,.94) 0%,rgba(3,7,10,.91) 53%,rgba(3,7,10,.23) 100%),
    url("../img/rule-bottom-bg.png") center / cover no-repeat;
}

.warning-icon,
.warning-copy{
  position:relative;
  z-index:2;
}

.warning-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}

.warning-icon img{
  display:block;
  width:118px;
  height:118px;
  object-fit:contain;
  filter:drop-shadow(0 0 8px rgba(255,37,30,.55)) drop-shadow(0 12px 10px rgba(0,0,0,.45));
}

.warning-copy h2{
  margin:0 0 8px;
  color:#ffb0aa;
  font-size:clamp(24px,3vw,38px);
  line-height:1;
  font-weight:950;
  letter-spacing:1.2px;
  text-shadow:0 0 11px rgba(255,52,42,.18);
}

.warning-copy h3{
  margin:0 0 8px;
  color:#f4f5f6;
  font-size:19px;
  font-weight:950;
  letter-spacing:1.4px;
}

.warning-copy p{
  margin:0 0 5px;
  color:#d2d6d8;
  font-size:16px;
  line-height:1.35;
}

.warning-copy strong{
  color:#ff4f42;
  font-size:16px;
  font-weight:900;
}

@media(max-width:1000px){
  .rules-hero{height:570px;}
  .rules-hero-content{padding-top:145px;}
  .rules-wrap{margin-top:-270px;}
  .rules-grid{grid-template-columns:1fr;}
}

@media(max-width:700px){
  .rules-page{padding-bottom:40px;}
  .rules-hero{height:480px;}
  .rules-hero-content{padding:125px 14px 0;}
  .rules-hero-content p,
  .rules-hero-content strong{font-size:14px;}
  .rules-wrap{width:calc(100% - 20px);margin-top:-215px;}
  .rules-panel{padding:24px 12px 16px;}
  .panel-topline h2{font-size:22px;}
  .rule-card{
    grid-template-columns:82px 1fr;
    gap:12px;
    min-height:112px;
    padding:10px 12px 10px 8px;
  }
  .rule-icon{width:76px;height:76px;}
  .rule-icon img{width:72px;height:72px;}
  .rule-copy h3{font-size:17px;}
  .rule-copy p{font-size:13px;}
  .rule-warning{
    grid-template-columns:90px 1fr;
    gap:10px;
    padding:16px 18px 16px 10px;
  }
  .warning-icon img{width:76px;height:76px;}
  .warning-copy h3{font-size:15px;}
  .warning-copy p,
  .warning-copy strong{font-size:13px;}
}