/* Shield & Shred — site theme (chitin dark + toxic green, matching the game) */
:root {
  --bg: #0c0913;
  --panel: #17102299;
  --panel-solid: #171022;
  --text: #e9e6f2;
  --dim: #a49fc0;
  --green: #55e63c;
  --green-dark: #2f8f22;
  --border: #2c2440;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 50% -10%, #1d1430 0%, var(--bg) 60%);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

.wrap { max-width: 860px; margin: 0 auto; padding: 32px 20px 80px; }

/* ---- header / nav ---- */
header.site {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0 26px;
}
header.site img { width: 52px; height: 52px; border-radius: 12px; }
header.site .name { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; }
header.site nav { margin-left: auto; display: flex; gap: 18px; }
header.site nav a { color: var(--dim); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
header.site nav a:hover { color: var(--green); }

/* ---- hero (landing) ---- */
.hero { text-align: center; padding: 48px 0 30px; }
.hero img.logo { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 0 60px #55e63c33; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; letter-spacing: 0.04em; margin-top: 22px; }
.hero h1 .amp { color: var(--green); }
.hero p.tag { color: var(--dim); font-size: 1.15rem; margin-top: 10px; }

.badge {
  display: inline-block; margin-top: 26px;
  background: var(--green); color: #0a1405;
  font-weight: 800; padding: 12px 26px; border-radius: 999px;
  text-decoration: none; box-shadow: 0 0 30px #55e63c44;
}
.badge.soon { background: transparent; color: var(--green); border: 2px solid var(--green-dark); box-shadow: none; cursor: default; }

/* ---- cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 44px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
}
.card h3 { color: var(--green); font-size: 1.02rem; margin-bottom: 8px; }
.card p { color: var(--dim); font-size: 0.95rem; }

/* ---- legal / article pages ---- */
article.legal { background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 34px clamp(18px, 4vw, 44px); }
article.legal h1 { font-size: 1.9rem; margin-bottom: 6px; }
article.legal h2 { font-size: 1.35rem; margin: 30px 0 10px; color: var(--green); }
article.legal h3 { font-size: 1.12rem; margin: 22px 0 8px; }
article.legal h4 { font-size: 1rem; margin: 18px 0 6px; color: var(--dim); }
article.legal p { margin: 10px 0; }
article.legal ul { margin: 10px 0 10px 24px; }
article.legal li { margin: 6px 0; }
article.legal a { color: var(--green); word-break: break-word; }

footer.site {
  margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--border);
  color: var(--dim); font-size: 0.9rem; text-align: center;
}
footer.site a { color: var(--dim); }
footer.site a:hover { color: var(--green); }