body {
  background: linear-gradient(180deg, #15110e, #1d1813);
  line-height: 1.5;
  padding: 28px 16px 90px;
}
.wrap { max-width: 1040px; margin: 0 auto; }

/* masthead */
header.mast {
  text-align: center; color: var(--paper);
  border-bottom: 3px double var(--gold); padding-bottom: 18px; margin-bottom: 20px;
}
.cross { color: var(--blood-bright); }
.mast .eyebrow {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: .42em;
  font-size: 11px; text-transform: uppercase; color: var(--gold); margin: 0 0 6px; padding-left: .42em;
}
.mast h1 {
  font-family: 'Pirata One', cursive; font-weight: 400; font-size: 52px; line-height: .95;
  margin: 0; color: #efe7d6; text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.mast .sub {
  font-family: 'Cinzel', serif; font-weight: 500; letter-spacing: .28em;
  text-transform: uppercase; font-size: 13px; color: var(--blood-bright); margin-top: 10px; padding-left: .28em;
}
.back {
  display: inline-block; margin-top: 12px; color: var(--gold); font-style: italic;
  text-decoration: none; border-bottom: 1px dotted var(--gold); font-size: 15px;
}
.back:hover { color: #efe7d6; border-bottom-color: #efe7d6; }

/* controls */
.controls {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, #1d1813, rgba(29,24,19,.96));
  padding: 14px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line);
}
.searchbar { position: relative; }
.searchbar input {
  width: 100%; padding: 14px 16px 14px 46px; font-family: 'EB Garamond', serif; font-size: 19px;
  background: var(--paper); color: var(--ink); border: 2px solid var(--gold); border-radius: 2px;
  outline: none;
}
.searchbar input:focus { border-color: var(--blood-bright); box-shadow: 0 0 0 3px rgba(156,22,32,.25); }
.searchbar .mag {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--rust); font-size: 20px;
}
.searchbar .clear {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--rust); font-size: 22px; cursor: pointer; display: none; line-height: 1;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-family: 'Cinzel', serif; font-weight: 600; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; padding: 7px 14px; border: 1px solid var(--line);
  background: var(--char); color: #cfc6b6; cursor: pointer; border-radius: 2px; user-select: none;
  transition: all .12s;
}
.chip:hover { border-color: var(--gold); color: #efe7d6; }
.chip.active { background: var(--blood); color: #fff; border-color: var(--blood-bright); }
.count { color: var(--rust); font-style: italic; font-size: 14px; margin: 10px 2px 0; }

/* groups */
.group { margin-top: 26px; }
.group > h2 {
  font-family: 'Cinzel', serif; font-weight: 900; font-size: 20px; letter-spacing: .04em;
  color: var(--gold); margin: 0 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--line);
  display: flex; align-items: baseline; gap: 10px;
}
.group > h2 .gc {
  font-family: 'EB Garamond', serif; font-weight: 400; font-style: italic;
  font-size: 15px; color: var(--rust); letter-spacing: 0; text-transform: none;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card {
  background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--blood);
  padding: 12px 16px 13px;
}
.card .term {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 16px; letter-spacing: .02em;
  color: var(--ink);
}
.card .tag {
  display: inline-block; font-family: 'Cinzel', serif; font-weight: 600; font-size: 9.5px;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--rust);
  padding: 2px 7px; border-radius: 2px; margin-left: 8px; vertical-align: middle;
}
.card .tag.effect { background: var(--blood); }
.card .tag.tagk   { background: #4a5a3a; }
.card .tag.bk     { background: #3a4a5a; }
.card .tag.fac    { background: #5a3a52; }
.card .def { margin-top: 6px; font-size: 16.5px; line-height: 1.45; color: #2a2520; }
.card .def b { color: var(--blood); }
mark { background: rgba(154,123,63,.5); color: inherit; padding: 0 1px; border-radius: 1px; }

.empty {
  color: var(--gold); font-style: italic; text-align: center;
  padding: 50px 0; font-size: 20px; display: none;
}

footer {
  margin-top: 46px; border-top: 3px double var(--gold); padding-top: 14px;
  text-align: center; color: var(--rust); font-style: italic; font-size: 14px;
}

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .mast h1 { font-size: 38px; }
}