/* =========================================================
   AstraPvP — Rules Page FINAL
   CSS-only cosmic / neon design
   Works with common semantic markup:
   main, article, .rules-page, .rules-content,
   h1-h4, p, ul, ol, blockquote, strong, hr
   ========================================================= */

:root{
  --astra-bg:#05060a;
  --astra-bg-2:#090a11;
  --astra-panel:#10121b;
  --astra-panel-2:#151725;
  --astra-purple:#8b00ff;
  --astra-purple-2:#a855f7;
  --astra-purple-3:#c084fc;
  --astra-text:#f7f7fb;
  --astra-muted:#9b9baa;
  --astra-line:rgba(168,85,247,.18);
  --astra-line-strong:rgba(192,132,252,.38);
  --astra-danger:#ff4d6d;
  --astra-warn:#f59e0b;
  --astra-success:#7cfc9f;
  --astra-radius:22px;
  --astra-shadow:0 26px 80px rgba(0,0,0,.42);
}

/* ---------- Base ---------- */

html{
  background:var(--astra-bg)!important;
  scroll-behavior:smooth;
}

body{
  margin:0!important;
  color:var(--astra-text)!important;
  background:
    radial-gradient(circle at 50% -12%,rgba(139,0,255,.17),transparent 30%),
    radial-gradient(circle at 10% 36%,rgba(91,33,182,.08),transparent 26%),
    radial-gradient(circle at 90% 70%,rgba(126,34,206,.07),transparent 28%),
    linear-gradient(180deg,#0b0c13 0%,#07080d 48%,#05060a 100%)!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* subtle star field */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(192,132,252,.48) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(139,0,255,.33) 0 1px,transparent 1.6px);
  background-size:120px 120px,170px 170px,230px 230px;
  background-position:0 0,40px 70px,90px 30px;
  opacity:.18;
  animation:astraRulesStars 32s linear infinite;
}

@keyframes astraRulesStars{
  to{
    background-position:0 -240px,40px -270px,90px -430px;
  }
}

/* ambient glow */
body::after{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(circle at 25% 30%,rgba(139,0,255,.065),transparent 16%),
    radial-gradient(circle at 75% 60%,rgba(168,85,247,.05),transparent 18%);
  animation:astraRulesAmbient 18s ease-in-out infinite alternate;
}

@keyframes astraRulesAmbient{
  from{transform:translate3d(-1%,0,0) scale(1)}
  to{transform:translate3d(1%,-1%,0) scale(1.04)}
}

/* ---------- Main container ---------- */

main,
article,
.rules-page,
.rules-content{
  position:relative;
}

main,
.rules-page,
.rules-content{
  max-width:1180px;
  margin:0 auto;
  padding:72px 24px 96px;
}

/* ---------- Hero / title ---------- */

h1{
  position:relative;
  margin:0 0 26px!important;
  color:#fff!important;
  font-size:clamp(2.6rem,6vw,5.2rem)!important;
  line-height:.98!important;
  letter-spacing:-.055em!important;
  font-weight:900!important;
  text-align:center;
  text-shadow:
    0 10px 36px rgba(0,0,0,.52),
    0 0 26px rgba(139,0,255,.18)!important;
}

h1::after{
  content:"";
  display:block;
  width:140px;
  height:4px;
  margin:22px auto 0;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--astra-purple),var(--astra-purple-3),transparent);
  box-shadow:0 0 24px rgba(139,0,255,.34);
}

/* first intro paragraphs as hero panel */
h1 + p,
h1 + p + p,
h1 + p + p + p{
  max-width:860px;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center;
}

h1 + p{
  margin-top:34px!important;
  font-size:1.14rem!important;
  color:#ececf2!important;
}

h1 + p + p{
  color:#b8b8c3!important;
  line-height:1.75!important;
}

h1 + p + p + p{
  margin-top:20px!important;
  color:#d7d7df!important;
  font-weight:650!important;
}

/* ---------- Section headings ---------- */

h2{
  position:relative;
  margin:58px 0 22px!important;
  padding:18px 22px!important;
  color:#fff!important;
  font-size:clamp(1.65rem,3vw,2.4rem)!important;
  line-height:1.1!important;
  letter-spacing:-.035em!important;
  font-weight:900!important;
  border:1px solid var(--astra-line)!important;
  border-radius:18px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(139,0,255,.10),transparent 28%),
    linear-gradient(145deg,rgba(20,19,31,.98),rgba(10,11,18,.99))!important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.02)!important;
  overflow:hidden;
}

h2::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:4px;
  background:linear-gradient(180deg,var(--astra-purple-3),var(--astra-purple));
  box-shadow:0 0 18px rgba(139,0,255,.4);
}

h2::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--astra-purple-2),transparent);
  opacity:.5;
}

h3{
  margin:30px 0 12px!important;
  color:#fff!important;
  font-size:1.18rem!important;
  font-weight:850!important;
  letter-spacing:-.015em;
}

h4{
  color:#e9ddff!important;
  font-weight:800!important;
}

/* ---------- Paragraphs ---------- */

p{
  color:var(--astra-muted)!important;
  font-size:1.02rem!important;
  line-height:1.75!important;
}

strong,
b{
  color:#fff!important;
  font-weight:850!important;
}

/* ---------- Lists ---------- */

ul,
ol{
  margin:14px 0 20px!important;
  padding-left:0!important;
  list-style:none!important;
}

li{
  position:relative;
  margin:10px 0!important;
  padding:13px 16px 13px 46px!important;
  color:#c9c9d2!important;
  line-height:1.6!important;
  border:1px solid rgba(168,85,247,.10);
  border-radius:14px;
  background:
    linear-gradient(145deg,rgba(17,18,28,.86),rgba(10,11,17,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.012);
  transition:.18s ease;
}

li:hover{
  transform:translateY(-1px);
  border-color:rgba(192,132,252,.22);
  background:
    linear-gradient(145deg,rgba(20,20,32,.93),rgba(11,12,19,.90));
}

li::before{
  content:"";
  position:absolute;
  left:18px;
  top:50%;
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translateY(-50%);
  background:var(--astra-purple-2);
  box-shadow:0 0 14px rgba(168,85,247,.45);
}

/* ---------- Rule cards from paragraphs following h3 ---------- */

h3 + p{
  margin-top:0!important;
  padding:18px 20px!important;
  border:1px solid rgba(168,85,247,.12);
  border-radius:16px;
  background:
    radial-gradient(circle at 100% 0%,rgba(139,0,255,.055),transparent 30%),
    linear-gradient(145deg,rgba(17,18,28,.90),rgba(10,11,17,.88));
  box-shadow:0 14px 34px rgba(0,0,0,.18);
}

/* ---------- Punishment highlighting ---------- */

p strong:first-child{
  color:#fff!important;
}

/* paragraphs that contain punishment wording */
p:has(strong:first-child){
  border-left:3px solid rgba(168,85,247,.55);
}

/* Warning / danger blocks via blockquote */
blockquote{
  position:relative;
  margin:24px 0!important;
  padding:20px 22px 20px 58px!important;
  color:#f4f4f8!important;
  border:1px solid rgba(245,158,11,.24)!important;
  border-left:4px solid var(--astra-warn)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(245,158,11,.07),transparent 35%),
    linear-gradient(145deg,rgba(30,23,12,.74),rgba(16,14,11,.82))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.18);
}

blockquote::before{
  content:"!";
  position:absolute;
  left:18px;
  top:18px;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(245,158,11,.14);
  color:#fbbf24;
  border:1px solid rgba(245,158,11,.30);
  font-weight:900;
}

/* ---------- HR ---------- */

hr{
  height:1px!important;
  margin:50px 0!important;
  border:0!important;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.24),transparent)!important;
}

/* ---------- Links ---------- */

a{
  color:var(--astra-purple-3)!important;
  text-decoration:none!important;
  font-weight:700;
  transition:.18s ease;
}

a:hover{
  color:#e5d0ff!important;
  text-shadow:0 0 12px rgba(168,85,247,.25);
}

/* ---------- Code / technical terms ---------- */

code{
  padding:3px 7px;
  border-radius:8px;
  color:#e8d8ff!important;
  background:rgba(139,0,255,.10)!important;
  border:1px solid rgba(168,85,247,.14);
}

/* ---------- Table support ---------- */

table{
  width:100%;
  margin:24px 0!important;
  border-collapse:separate!important;
  border-spacing:0!important;
  overflow:hidden;
  border:1px solid var(--astra-line)!important;
  border-radius:16px!important;
  background:rgba(13,14,22,.88)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.20);
}

th,
td{
  padding:14px 16px!important;
  border-bottom:1px solid rgba(255,255,255,.045)!important;
  color:#c9c9d2!important;
}

th{
  color:#fff!important;
  font-weight:850!important;
  background:rgba(139,0,255,.08)!important;
}

tr:last-child td{
  border-bottom:0!important;
}

/* ---------- Footer-ish last rule ---------- */

main > p:last-child,
.rules-content > p:last-child{
  margin-top:48px!important;
  padding:24px!important;
  text-align:center;
  color:#fff!important;
  font-weight:850!important;
  border:1px solid rgba(168,85,247,.20);
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%,rgba(139,0,255,.12),transparent 44%),
    linear-gradient(145deg,rgba(20,19,31,.96),rgba(10,11,18,.98));
  box-shadow:0 20px 56px rgba(0,0,0,.24);
}

/* ---------- Scrollbar ---------- */

::selection{
  background:rgba(139,0,255,.34);
  color:#fff;
}

::-webkit-scrollbar{
  width:9px;
}

::-webkit-scrollbar-track{
  background:#07070b;
}

::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#6d28d9,#9333ea);
  border-radius:999px;
}

/* ---------- Mobile ---------- */

@media(max-width:768px){
  main,
  .rules-page,
  .rules-content{
    padding:42px 16px 70px!important;
  }

  h1{
    font-size:2.55rem!important;
    line-height:1!important;
  }

  h1::after{
    width:110px;
    margin-top:18px;
  }

  h2{
    margin-top:40px!important;
    padding:16px 17px!important;
    font-size:1.55rem!important;
    border-radius:16px!important;
  }

  h3{
    font-size:1.08rem!important;
    line-height:1.35!important;
  }

  p{
    font-size:.98rem!important;
    line-height:1.68!important;
  }

  h3 + p{
    padding:16px 16px!important;
  }

  li{
    padding:12px 14px 12px 42px!important;
    border-radius:13px!important;
  }

  li::before{
    left:16px;
  }

  blockquote{
    padding:18px 16px 18px 54px!important;
  }

  table{
    display:block;
    overflow-x:auto;
  }
}

@media(max-width:420px){
  main,
  .rules-page,
  .rules-content{
    padding-left:14px!important;
    padding-right:14px!important;
  }

  h1{
    font-size:2.25rem!important;
  }

  h2{
    font-size:1.42rem!important;
  }

  h3{
    font-size:1.03rem!important;
  }

  p{
    font-size:.95rem!important;
  }
}

/* ---------- Reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}