/* Общий стиль сайта Lines of Strategy: тёмная фиолетовая тема игры, золотой акцент, фон — иллюстрация лагеря. */
@font-face {
  font-family: "Rubik Black";
  src: url("/lines/fonts/Rubik-Black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}

:root {
  --bg: #0c0b1f;
  --panel: rgba(24, 22, 52, .82);
  --line: #2c2a58;
  --fg: #eef0fa;
  --muted: #a3a8c6;
  --accent: #ffd35c;
  --head: #ffe4a0;
  --display: "Rubik Black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* Иллюстрация лагеря вверху страницы, растворяется в фоне. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 11, 31, .55) 0%, rgba(12, 11, 31, .82) 45%, var(--bg) 85%),
    radial-gradient(900px 500px at 50% -10%, rgba(255, 196, 92, .16), transparent 65%),
    url("/lines/img/bg-camp.webp") center top / cover no-repeat;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 0 16px 72px; }
.doc { max-width: 780px; margin: 0 auto; padding: 32px 16px 80px; }

a { color: var(--accent); overflow-wrap: anywhere; }

header.page { padding: 28px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
header.page .back { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--muted); font-size: .92rem; margin-bottom: 14px; }
header.page .back img { width: 34px; height: 34px; border-radius: 9px; }
header.page h1 { font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.1; margin: 0 0 6px; color: var(--accent); }

h2 { font-size: 1.22rem; margin: 36px 0 8px; color: var(--head); }
h3 { font-size: 1.02rem; margin: 22px 0 4px; color: var(--fg); }
ul { padding-left: 20px; }
li { margin: 7px 0; }
.muted { color: var(--muted); font-size: .9rem; }

.note, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0;
}

.glance { width: 100%; border-collapse: collapse; margin: 14px 0 4px; font-size: .95rem; }
.glance th, .glance td { text-align: left; vertical-align: top; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
.glance th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 560px) {
  .glance thead { display: none; }
  .glance tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .glance td { display: block; padding: 2px 0; border: 0; }
  .glance td:first-child { font-weight: 600; color: var(--head); }
}

footer.links, footer.page {
  margin-top: 44px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
footer .copy { margin-top: 8px; font-size: .82rem; opacity: .8; }