/* === MÖRK BORG — СТИЛИ === */

body {
  background: #222;
  color: #222;
  font-family: 'IM Fell English', 'Volkhov', serif;
  font-size: 17px;
  line-height: 1.65;
}

/* TOPBAR — тёмный */
.topbar { background: rgba(26,16,8,0.97); border-bottom: 2px solid #8b0000; }
.topbar a { color: #c8b080; }
.topbar a:hover { color: #FFE800; background: rgba(255,232,0,0.1); }

/* === РАЗВОРОТЫ === */
.spread {
  position: relative;
  width: 100%; max-width: 1024px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 5rem 4rem 3rem;
  overflow: hidden;
}

.spread.yellow { background: #FFE800; color: #222; }
.spread.parchment {
  background: #e0d4b0;
  background-image: radial-gradient(ellipse at 20% 30%, rgba(139,0,0,0.08) 0%, transparent 25%);
  color: #222;
}
.spread.dark { background: #222; color: #e0d4b0; }
.spread.red { background: #cc0000; color: #fff; }

/* === ТИПОГРАФИКА === */
h1, h2 { font-family: 'UnifrakturMaguntia', cursive; }
h3 { font-family: 'Special Elite', serif; text-transform: uppercase; letter-spacing: 0.06em; color: #8b0000; }

.hero-title {
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: clamp(5rem, 16vw, 10rem);
  color: #1a1008;
  text-shadow: 4px 4px 0 rgba(139,0,0,0.35);
  line-height: 0.85;
  transform: rotate(-2.5deg);
}
.hero-sub {
  font-family: 'Special Elite', serif;
  color: #8b0000;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  margin-top: 0.8rem;
  font-size: 1.2rem;
}
.hero-flavor {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: #5a0000;
  max-width: 520px;
  text-align: center;
  margin-top: 1.5rem;
  line-height: 1.8;
  font-size: 1rem;
}

h2 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

/* Тёмные развороты */
.spread.dark h2 { color: #FFE800; }
.spread.dark h3 { color: #FF40B4; }
.spread.dark strong { color: #FFE800; }
.spread.dark em { color: #FF40B4; }
.spread.dark .stat { color: #FFE800; }
.spread.dark .dice { color: #FF40B4; }

.spread.red h2 { color: #FFE800; }

/* === КАРТОЧКИ, ТАБЛИЦЫ, DETAILS === */
.card {
  background: rgba(0,0,0,0.04);
  border-left: 5px solid #8b0000;
  padding: 1rem 1.2rem;
  margin-bottom: 1.2rem;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.08);
}
.card h4 { color: #8b0000; font-family: 'Special Elite', serif; text-transform: uppercase; font-size: 1.1rem; margin-bottom: 0.5rem; }

table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:0.9rem; }
th { background:#222; color:#FFE800; text-align:left; padding:0.5rem 0.7rem; font-family:'Special Elite',serif; text-transform:uppercase; }
td { padding:0.45rem 0.7rem; border-bottom:1px solid rgba(0,0,0,0.1); }
td:first-child { color:#8b0000; font-weight:700; }
tr:hover td { background:rgba(139,0,0,0.06); }

details { background:rgba(0,0,0,0.03); border-left:4px solid #222; margin-bottom:1rem; }
summary { cursor:pointer; padding:0.9rem 1rem; font-weight:700; color:#222; list-style:none; display:flex; align-items:center; gap:0.6rem; font-family:'Special Elite',serif; text-transform:uppercase; }
summary::before { content:'†'; font-size:1.1rem; color:#8b0000; }
summary:hover { color:#8b0000; }
details[open] summary::before { transform:rotate(180deg); }
details .inner { padding:0 1rem 1rem; }

.tag { display:inline-block; background:#FFE800; color:#222; padding:0.1rem 0.5rem; font-size:0.85rem; font-weight:700; font-family:'Special Elite',serif; }
.stat { color:#8b0000; font-weight:700; }
.dice { color:#660000; font-weight:700; }
strong { font-weight:800; }
em { color:#8b0000; font-style:italic; }

/* === БОКОВАЯ НАВИГАЦИЯ === */
#sidenav {
  position: fixed; left: 8px; top: 50%; transform: translateY(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 2px;
}
#sidenav a {
  display: block; color: #e0d4b0;
  text-decoration: none; padding: 3px 7px;
  font-size: 7px; font-family: 'Press Start 2P', monospace;
  text-transform: uppercase;
  background: rgba(34,34,34,0.9);
  white-space: nowrap; transition: none;
  border: 1px solid transparent;
}
#sidenav a:hover { background: #FFE800; color: #222; border-color: #222; }

/* FOOTER */
footer {
  background: #222; color: #706050;
  padding: 2rem 4rem; font-size: 0.75rem; line-height: 1.8;
  max-width: 1024px; margin: 0 auto;
  font-family: 'IM Fell English', serif;
}

/* DOOM-РАЗДЕЛИТЕЛИ */
.doom {
  width: 100%; max-width: 1024px; margin: 0 auto;
  text-align: center; padding: 3rem 2rem;
  font-family: 'UnifrakturMaguntia', cursive;
  font-size: 1.8rem;
}
.doom.on-black { background: #222; color: #cc0000; }
.doom.on-yellow { background: #FFE800; color: #222; }
.doom.on-red { background: #cc0000; color: #FFE800; }
.doom::before, .doom::after { content: '☠'; margin: 0 1rem; }

/* СКРОЛЛБАР */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#222; }
::-webkit-scrollbar-thumb { background:#8b0000; }

::selection { background: #A2A2A2; }

/* GRID-РАСКЛАДКИ */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.three-col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; }

/* АДАПТИВ */
@media (max-width: 768px) {
  .spread { padding: 4rem 1.5rem 2rem; min-height: auto; }
  .two-col, .three-col { grid-template-columns: 1fr; }
  #sidenav {
    position: sticky; top: 32px; left: auto; transform: none;
    flex-direction: row; flex-wrap: wrap;
    background: rgba(34,34,34,0.97); padding: 4px; z-index: 199;
  }
  #sidenav a { font-size: 6px; padding: 2px 4px; }
}