/* ============================================================
   GLOBAL WARFARE 4 — Rules page styles
   Loaded in addition to site.css on rules.php only.
   ============================================================ */

/* sticky jump-nav */
.rules-jump{
  display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;
  position:sticky;top:4.25rem;z-index:50;
  background:color-mix(in srgb,var(--color-neutral-darkest),transparent 12%);
  backdrop-filter:blur(12px);
  padding:0.85rem 0.5rem;margin:-0.5rem auto 3.5rem;
  border-bottom:1px solid var(--color-white-10);
}
.rules-jump a{padding:0.6rem 1.25rem;border:1px solid var(--scheme-border);border-radius:999px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;font-size:var(--text-small);color:var(--color-neutral-light);transition:all .2s ease}
.rules-jump a:hover{border-color:var(--color-jaffa);color:var(--color-jaffa)}
.rules-jump a.active{background:var(--color-jaffa);border-color:var(--color-jaffa);color:#0b0606}

/* sections */
.rules-body{counter-reset:secn}
.rule-section{margin-bottom:4rem;scroll-margin-top:8rem}
.rule-section:last-child{margin-bottom:0}
.sec-h{display:flex;align-items:center;gap:1.25rem;margin-bottom:2rem;position:relative;counter-increment:secn}
.sec-h h2{font-size:var(--text-h3);line-height:1;letter-spacing:-0.01em;text-transform:uppercase;white-space:nowrap;position:relative;z-index:1}
.sec-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--color-jaffa),transparent)}
.sec-h::before{content:counter(secn,decimal-leading-zero);position:absolute;right:0;top:-2.6rem;font-family:"Barlow Condensed",sans-serif;font-weight:800;font-size:5.5rem;line-height:1;color:var(--color-white-5);pointer-events:none;z-index:0}

/* rule cards */
.rule-card{
  background:var(--scheme-foreground);border:1px solid var(--scheme-border);
  border-left:3px solid transparent;border-radius:var(--radius-card);
  padding:1.75rem;margin-bottom:1.25rem;
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.rule-card:hover{border-left-color:var(--color-jaffa);transform:translateY(-3px);box-shadow:0 16px 38px -16px rgba(0,0,0,0.7),0 0 0 1px color-mix(in srgb,var(--color-jaffa),transparent 78%)}
.rule-card h3{display:flex;align-items:center;gap:0.75rem;font-size:var(--text-h5);text-transform:uppercase;letter-spacing:-0.01em;margin-bottom:0.85rem}
.rule-card h3::before{content:"";width:0.7rem;height:0.7rem;background:var(--color-jaffa);transform:rotate(45deg);flex:none}
.rule-card p{margin-bottom:0.6rem;color:rgba(255,255,255,0.85)}
.rule-card p:last-child{margin-bottom:0}

/* numbered cards inside the ordered sections */
#general-rules,#main-structures,#auxiliary-buildings{counter-reset:rc}
#general-rules .rule-card,#main-structures .rule-card,#auxiliary-buildings .rule-card{counter-increment:rc}
#general-rules .rule-card h3::before,
#main-structures .rule-card h3::before,
#auxiliary-buildings .rule-card h3::before{
  content:counter(rc);width:2rem;height:2rem;border-radius:0.5rem;
  background:color-mix(in srgb,var(--color-jaffa),transparent 84%);
  border:1px solid color-mix(in srgb,var(--color-jaffa),transparent 55%);
  color:var(--color-jaffa);font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;transform:none;
}

/* rule lists */
.rule-list{list-style:none;display:flex;flex-direction:column;gap:0.5rem;margin-top:0.75rem}
.rule-list li{padding-left:1.5rem;position:relative;color:rgba(255,255,255,0.85)}
.rule-list li::before{content:"\203A";position:absolute;left:0;color:var(--color-jaffa);font-weight:700}
.rule-list.ordered{counter-reset:r}
.rule-list.ordered li{counter-increment:r}
.rule-list.ordered li::before{content:counter(r);font-size:0.8rem;top:0.15rem}

/* callouts */
.callout{border-radius:var(--radius-card);padding:1.25rem 1.5rem;margin:1.5rem 0}
.callout:last-child{margin-bottom:0}
.callout strong{color:#fff}
.callout-highlight{background:color-mix(in srgb,var(--color-jaffa),transparent 88%);border:1px solid color-mix(in srgb,var(--color-jaffa),transparent 68%)}
.callout-info{background:var(--color-white-5);border:1px solid var(--scheme-border)}
.callout-info em{color:var(--color-neutral-light);font-style:normal}
.callout-warning{background:color-mix(in srgb,var(--color-negative),transparent 86%);border:1px solid color-mix(in srgb,var(--color-negative),transparent 62%);padding-left:3.25rem;position:relative}
.callout-warning::before{content:"!";position:absolute;left:1.1rem;top:50%;transform:translateY(-50%);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--color-negative);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:0.9rem}

/* sub-rules */
.sub-rule{background:var(--color-white-5);border-left:3px solid color-mix(in srgb,var(--color-jaffa),transparent 45%);padding:1rem 1.25rem;margin:1rem 0 1rem 1rem;border-radius:0 var(--radius-form) var(--radius-form) 0}
.sub-rule strong{color:#fff;display:block;margin-bottom:0.35rem}

/* dimension chips */
.chip{display:inline-block;background:color-mix(in srgb,var(--color-jaffa),transparent 80%);border:1px solid color-mix(in srgb,var(--color-jaffa),transparent 50%);padding:0.05rem 0.6rem;border-radius:var(--radius-badge);font-weight:700;color:var(--color-jaffa-light);font-size:0.95em;line-height:1.3;white-space:nowrap}

/* video embed */
.video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:var(--radius-card);margin-top:1.25rem;border:1px solid var(--scheme-border)}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* scroll reveal */
.reveal-ready .rule-card,.reveal-ready .callout{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal-ready .rule-card.in,.reveal-ready .callout.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal-ready .rule-card,.reveal-ready .callout{opacity:1;transform:none;transition:none}}
@media print{.reveal-ready .rule-card,.reveal-ready .callout{opacity:1;transform:none}}