:root{
  --bg-primary:#020410;
  --bg-surface:#0A0E1A;
  --text-primary:#DDE6F0;
  --accent-red:#CC3D5A;
  --accent-orange:#E6A33D;
  --accent-cyan:#3DA3CC;
  --neutral:#2A3140;
  --glow-subtle:rgba(61,163,204,.3);
}

/* Base */
html,body{margin:0}
body{
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:Inter,system-ui,ui-sans-serif;
  line-height:1.6;
  font-size:16px;
}

/* Header/Nav/Footer */
header{
  background:var(--bg-surface);
  border-bottom:1px solid var(--accent-cyan);
  position:sticky; top:0; z-index:10;
  padding:1rem;
}
nav{display:flex; gap:1rem; align-items:center; justify-content:center}
nav a{
  color:var(--text-primary);
  text-decoration:none;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.02em;
  padding:.25rem .5rem;
}
nav a:hover{ color:var(--accent-cyan); text-decoration:underline }
footer{
  text-align:center; font-size:.875rem; color:var(--neutral);
  padding:1rem 0; border-top:1px solid var(--neutral);
}

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  background:var(--accent-cyan); color:#000; padding:.5rem .75rem; border-radius:.25rem;
}

/* Headings */
h1,h2,h3{
  font-family:"Press Start 2P",monospace;
  text-transform:uppercase; letter-spacing:.05em; margin-top:2rem;
}
h1{
  font-size:2rem;
  background:linear-gradient(to bottom,var(--accent-orange),var(--accent-red));
  background-clip:text;          /* standard property */
  -webkit-background-clip:text;  /* vendor prefix for Safari/Chrome */
  -webkit-text-fill-color:transparent;
  text-shadow:1px 1px 2px var(--glow-subtle);
}
h2{ font-size:1.5rem; color:var(--accent-cyan); text-shadow:1px 1px 1px var(--glow-subtle) }
h3{ font-size:1.25rem; color:var(--text-primary) }

/* Reusable components */
.btn{
  font-family:"Press Start 2P",monospace;
  padding:.75rem 1.5rem; border:1px solid var(--accent-cyan); border-radius:4px;
  background:var(--bg-surface); color:var(--text-primary); text-transform:uppercase;
  font-size:.875rem; transition:all .2s ease; box-shadow:0 0 4px var(--glow-subtle);
}
.btn:hover{ background:var(--accent-cyan); color:var(--bg-primary); box-shadow:0 0 8px var(--glow-subtle) }
.btn-primary{ background:var(--accent-red); border-color:var(--accent-red); color:#fff }
.btn-primary:hover{ background:var(--accent-orange); border-color:var(--accent-orange) }

.card{
  background:var(--bg-surface); border:1px solid var(--neutral); border-radius:4px;
  padding:1.5rem; box-shadow:0 0 8px var(--glow-subtle); margin-bottom:1rem;
}

/* Link focus */
a:focus{ outline:2px solid var(--accent-cyan); outline-offset:2px }


/* Rules page layout fixes */
.rules-grid{display:grid; gap:1.5rem}
@media (min-width:768px){
  .rules-grid{grid-template-columns:260px 1fr}
}

/* TOC: small, non-display type */
.toc-title{
  font-family: Inter, system-ui, ui-sans-serif;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
  font-size:.875rem;
  color:var(--accent-cyan);
  margin:0 0 .5rem 0;
}
.toc-list{
  list-style:decimal;
  padding-left:1.25rem;
  margin:0;
}
.toc-list a{
  color:var(--text-primary);
  text-decoration:none;
}
.toc-list a:hover{ color:var(--accent-cyan); text-decoration:underline }

/* ===== Header ===== */
.lhq-header{
  position:sticky; top:0; z-index:20;
  background:var(--bg-surface);
  border-bottom:1px solid var(--accent-cyan);
  box-shadow:0 1px 0 rgb(255 255 255 / .06);
}
.lhq-header__bar{
  max-width:72rem; margin-inline:auto;
  display:flex; align-items:center; gap:1rem;
  padding:.75rem 1rem;
}
.lhq-wordmark{
  font-family:"Press Start 2P", monospace;
  letter-spacing:.08em; text-transform:uppercase;
  font-size:1rem; color:var(--text-primary); text-decoration:none;
  padding:.25rem .5rem; border-radius:.25rem;
}
.lhq-wordmark:hover{ color:var(--accent-cyan); text-decoration:underline }

/* Primary nav */
.lhq-nav{ margin-left:auto; display:flex; flex-wrap:wrap; gap:.5rem .75rem }
.lhq-nav__link{
  text-transform:uppercase; font-weight:600; letter-spacing:.02em;
  color:var(--text-primary); text-decoration:none;
  padding:.375rem .625rem; border-radius:.5rem;
  position:relative;
}
.lhq-nav__link:hover{ color:var(--accent-cyan) }
.lhq-nav__link[aria-current="page"]{
  color:var(--accent-cyan);
}
.lhq-nav__link[aria-current="page"]::after{
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:-6px;
  height:2px; background:var(--accent-cyan);
  border-radius:2px; box-shadow:0 0 8px var(--glow-subtle);
}

/* Tagline */
.lhq-tagline{
  max-width:72rem; margin:0 auto .5rem auto;
  padding:0 1rem; opacity:.75; font-size:.75rem;
}

/* ===== Footer ===== */
.lhq-footer{
  background:var(--bg-surface);
  border-top:1px solid var(--neutral);
  margin-top:2rem;
}
.lhq-footer__inner{
  max-width:72rem; margin-inline:auto;
  display:grid; gap:.75rem; align-items:center;
  grid-template-columns:1fr; padding:1rem;
}
@media (min-width:768px){
  .lhq-footer__inner{ grid-template-columns:1fr auto 1fr }
}
.lhq-footer__left{ display:flex; align-items:center; gap:.5rem }
.lhq-wordmark--sm{
  font-family:"Press Start 2P", monospace; letter-spacing:.08em;
  font-size:.75rem;
}
.lhq-gag{ font-size:.75rem; opacity:.7 }
.lhq-footer__nav{ display:flex; gap:1rem; justify-content:center }
.lhq-footer__link{
  color:var(--text-primary); text-decoration:none; font-size:.875rem;
}
.lhq-footer__link:hover{ color:var(--accent-cyan); text-decoration:underline }
.lhq-footer__right{ text-align:right }
.lhq-smallprint{ color:var(--neutral); font-size:.75rem }

/* ===== Small a11y polish ===== */
.lhq-nav__link:focus, .lhq-footer__link:focus, .lhq-wordmark:focus{
  outline:2px solid var(--accent-cyan); outline-offset:2px;
}