@import url('https://fonts.googleapis.com/css2?family=Special+Gothic:wght@400&display=swap');

@font-face {
  font-family: 'Alagard';
  src: url('https://pearlnightslair.neocities.org/assets/alagard.ttf') format('truetype');
}
@font-face {
  font-family: 'Birchleaf';
  src: url('https://pearlnightslair.neocities.org/assets/BirchLeaf.ttf') format('truetype');
}
@font-face {
  font-family: 'Tandy';
  src: url('https://pearlnightslair.neocities.org/assets/PxPlus_Tandy1K-II_200L-2y.ttf') format('truetype');
}
@font-face {
  font-family: 'ObeliskDemo';
  src: url('https://pearlnightslair.neocities.org/fonts/ObeliskDemo.ttf') format('truetype');
  font-display: swap;
}

:root {
  --pagebg:          #000000;
  --cover:           #000000;
  --cover-accent:    #ffffff;
  --page-bg:         #000000;
  --color:           #ffffff;
  --color-muted:     #888888;
  --link:            #ffffff;
  --divider:         #ffffff;
  --border:          #ffffff;
  --btn-border:      #ffffff;
  --headerfont:      'Alagard', serif;
  --titlefont:       'ObeliskDemo', serif;
  --bodyfont:        'Special Gothic', sans-serif;
  --asciifont:       'Tandy', monospace;
  --dropcapfont:     'Birchleaf', serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --pagebg:          #ffffff;
    --cover:           #ffffff;
    --cover-accent:    #000000;
    --page-bg:         #ffffff;
    --color:           #000000;
    --color-muted:     #555555;
    --link:            #000000;
    --divider:         #000000;
    --border:          #000000;
    --btn-border:      #000000;
  }
}

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

body {
  background: var(--pagebg);
  color: var(--color);
  font-family: var(--bodyfont);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

body::before {
  content: 
"                                                  _\A\
                                                _( )_\A\
                                               (_   _)\A\
                                            _____) (___\A\
                                           |____________\A\
                                            | ..--..-\A\
                                            | --..--..--\A\
                                            | ..--..-\A\
                                            | --..--..--\A\
                                            | ..--..-\A\
                                            | --..--..--\A\
                                            | ..--..-\A\
          @                                 | --..--..--\A\
          |                                 | ..--..-\A\
          |                                 | --..--..--\A\
    @   _[ ]_   @                           | --..--. \A\
    |__/     \\__|                           | ..--..--..\A\
  @   / _   _ \\   @                         | --..--. \A\
  |__/ / | | \\ \\__|                         | --..--..--\A\
    / /  | |  \\ \\                           | ..--..- \A\
 __/ /___| |___\\ \\__                        | --..--..--\A\
[___________________]                       | --..--. \A\
       |     |                              | ..--..--..\A\
        \\_ _/                               | --..--. \A\
         | |                                | --..--..--\A\
         | |                                | ..--..- \A\
         | |            @                   | --..--..--\A\
         | |         __@@@__                | --..--. \A\
         | |         )_   _(                | ..--..--..\A\
         | |           | |                  | --..--. \A\
         | |   @       | |      @           | --..--..--\A\
         | |  _@@@__   | |   __@@@__        | ..--..- \A\
         | |   _  _(   | |   )_   _(        | --..--..--\A\
         | |   \\  \\___/   \\___/  /          | ..--..- \A\
         | |    \\_____     _____/           | ..--..--..\A\
         | |          \\_ _/                 | ..--..- \A\
         | |           | |                  | --..--..--\A\
         | |           | |                  | ..--..-\A\
         | |          (_ _)                 | --..--..--\A\
         | |           | |                  | ..--..-\A\
         | |          (_ _)                 | --..--..--\A\
         | |           | |                  __________________\A\
         | |          (_ _)                | --..--. \A\
         | |           | |                 | ..--..--..\A\
         | |          (_ _)                |_ __ __ __ __ __ _\A\
         | |           | |                |\A\
         | |                              |\A\ ";
  position: fixed;
  bottom: 0;
  left: 0;
  transform: none;
  overflow: hidden;
  max-width: 25vw;
  
  font-family: var(--asciifont);
  font-size: 14px;
  line-height: 1;
  white-space: pre;

  color: var(--color);
  opacity: 0.6;

  pointer-events: none;
  z-index: 0;
}
body::after {
  content:
"           _                                                  \A\
         _( )_                                                \A\
        (_   _)                                               \A\
       ___) (_____                                            \A\
      ____________|                                           \A\
         -..--.. |                                            \A\
      --..--..-- |                                            \A\
         -..--.. |                                            \A\
      --..--..-- |                                            \A\
         -..--.. |                                            \A\
      --..--..-- |                                            \A\
         -..--.. |                                            \A\
      --..--..-- |                                 @          \A\
         -..--.. |                                 |          \A\
      --..--..-- |                                 |          \A\
         .--..-- |                           @   _[ ]_   @    \A\
      ..--..--.. |                           |__/     \\__|    \A\
         .--..-- |                         @   / _   _ \\   @  \A\
      --..--..-- |                         |__/ / | | \\ \\__|  \A\
         -..--.. |                           / /  | |  \\ \\    \A\
      --..--..-- |                        __/ /___| |___\\ \\__ \A\
         .--..-- |                       [___________________]\A\
      ..--..--.. |                              |     |       \A\
         .--..-- |                               \\_ _/        \A\
      --..--..-- |                                | |         \A\
         -..--.. |                                | |         \A\
      --..--..-- |                   @            | |         \A\
         .--..-- |                __@@@__         | |         \A\
      ..--..--.. |                )_   _(         | |         \A\
         .--..-- |                  | |           | |         \A\
      --..--..-- |           @      | |       @   | |         \A\
         -..--.. |        __@@@__   | |   __@@@_  | |         \A\
      --..--..-- |        )_   _(   | |   )_  _   | |         \A\
         -..--.. |          \\  \\___/   \\___/  /   | |         \A\
      ..--..--.. |           \\_____     _____/    | |         \A\
         -..--.. |                 \\_ _/          | |         \A\
      --..--..-- |                  | |           | |         \A\
         -..--.. |                  | |           | |         \A\
      --..--..-- |                 (_ _)          | |         \A\
         -..--.. |                  | |           | |         \A\
      --..--..-- |                 (_ _)          | |         \A\
__________________                  | |           | |         \A\
          .--..-- |                (_ _)          | |         \A\
       ..--..--.. |                 | |           | |         \A\
_ __ __ __ __ __ _|                (_ _)          | |         \A\
                   |                | |           | |         \A\
                   |                              | |         \A\ ";
  position: fixed;
  bottom: 0;
  right: 0;
  transform: none;
  overflow: hidden;
  max-width: 25vw;

  font-family: var(--asciifont);
  font-size: 14px;
  line-height: 1;
  white-space: pre;
  color: var(--color);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}


#cover {
  width: 100%;
  max-width: 1100px;
  border-radius: 15px;
  background: var(--cover);
  padding: 10px;
  border: 1px solid var(--cover-accent);
  position: relative; 
  z-index: 1;
}

#page1 {
  background: var(--page-bg);
  border-radius: 12px;
  padding: 2px;
  border: 1px solid var(--border);
}

#page2 {
  background: var(--page-bg);
  border-radius: 11px;
  padding: 2px;
  border: 1px solid var(--border);
}

#page3 {
  background: var(--page-bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  height: 700px;
}

.spread {
  display: none;
  width: 100%;
  height: 100%;
  flex-direction: row;
}

#s0-content { display: flex; }

#s1:target ~ #cover #s0-content { display: none; }
#s2:target ~ #cover #s0-content { display: none; }
#s3:target ~ #cover #s0-content { display: none; }
#s4:target ~ #cover #s0-content { display: none; }
#s5:target ~ #cover #s0-content { display: none; }
#s6:target ~ #cover #s0-content { display: none; }
#s7:target ~ #cover #s0-content { display: none; }
#s8:target ~ #cover #s0-content { display: none; }
#s9:target ~ #cover #s0-content { display: none; }

#s1:target ~ #cover #s1-content { display: flex; }
#s2:target ~ #cover #s2-content { display: flex; }
#s3:target ~ #cover #s3-content { display: flex; }
#s4:target ~ #cover #s4-content { display: flex; }
#s5:target ~ #cover #s5-content { display: flex; }
#s6:target ~ #cover #s6-content { display: flex; }
#s7:target ~ #cover #s7-content { display: flex; }
#s8:target ~ #cover #s8-content { display: flex; }
#s9:target ~ #cover #s9-content { display: flex; }

#s0:target ~ #cover #s0-content { display: flex; }
#s0:target ~ #cover #s1-content,
#s0:target ~ #cover #s2-content,
#s0:target ~ #cover #s3-content,
#s0:target ~ #cover #s4-content,
#s0:target ~ #cover #s5-content,
#s0:target ~ #cover #s6-content,
#s0:target ~ #cover #s7-content,
#s0:target ~ #cover #s8-content,
#s0:target ~ #cover #s9-content { display: none; }

.leftpage,
.rightpage {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.page-content {
  flex: 1;
  overflow-y: scroll;
  padding: 30px 35px 10px 35px;
}

.divider {
  width: 1px;
  background: var(--divider);
  flex-shrink: 0;
  align-self: stretch;
}

.page-footer {
  display: flex;
  flex-shrink: 0;
  padding: 14px 35px 20px 35px;
  border-top: 1px dashed var(--border);
}

.leftpage .page-footer  { justify-content: flex-start; }
.rightpage .page-footer { justify-content: flex-end; }

.page-turn {
  display: inline-block;
  font-family: var(--headerfont);
  font-size: 1.3rem;
  color: var(--link);
  text-decoration: none;
  border: 1px dashed var(--btn-border);
  padding: 5px 14px;
  background: none;
}

.page-content h1 {
  font-family: var(--titlefont);
  font-weight: normal;
  font-size: 1.8rem;
  color: var(--color);
  margin-bottom: 0.3em;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.page-content h1 a {
  color: inherit;
  text-decoration: none;
}

.page-content h2 {
  font-family: var(--headerfont);
  font-weight: normal;
  font-size: 1.3rem;
  color: var(--color);
  margin-top: 1.2em;
  margin-bottom: 0.3em;
  padding-top: 0.6em;
  border-top: 1px dashed var(--border);
  padding-bottom: 0.3em;
  border-bottom: 1px dashed var(--border);
}

.page-content hr {
  border: none;
  border-top: 1px dashed var(--border);
  margin: 1em 0;
  opacity: 0.5;
}

.page-content p {
  font-family: var(--bodyfont);
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color);
  margin: 0.8em 0;
  letter-spacing: 0.3px;
}

.page-content h1 + p::first-letter {
  font-size: 2em;
  font-family: var(--dropcapfont);
  border: 1px dashed var(--border);
  padding: 0.2em 0.3em;
  margin-right: 0.2em;
  float: left;
  line-height: 1;
}

.ascii-art-label {
  margin: 0.6em 0;
  display: flex;
  justify-content: center;
}

.ascii-art-label pre {
  font-family: var(--asciifont);
  font-size: 1rem;
  line-height: 1.2;
  color: var(--color);
  white-space: pre;
  overflow-x: auto;
  display: inline-block;
  text-align: left;
}

h2.monster-name {
  font-family: var(--headerfont);
  font-weight: normal;
  font-size: 1.3rem;
  color: var(--color);
  margin-top: 0.4em;
  margin-bottom: 0;
  text-align: center;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
  padding-top: 0.4em;
  padding-bottom: 0.4em;
}

.index-list {
  list-style: none;
  padding: 0;
  margin: 1.2em 0 0 0;
}

.index-list li {
  border-bottom: 1px dashed var(--border);
  padding: 7px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.index-list li span {
  font-family: var(--bodyfont);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.index-list a {
  font-family: var(--headerfont);
  font-weight: normal;
  font-size: 1rem;
  color: var(--link);
  text-decoration: none;
}

.index-list a:hover {
  text-decoration: underline;
}
.page-content a {
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 768px) {
  body {
    justify-content: flex-start;
    padding: 10px;
  }

  #page3 {
    height: auto;
    flex-direction: column;
  }

  .spread {
    flex-direction: column;
  }

  .divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }

  .leftpage,
  .rightpage {
    height: auto;
    min-height: 300px;
  }

  .page-content {
    padding: 20px 20px 10px 20px;
    overflow-y: visible;
  }

  .page-footer {
    padding: 12px 20px 16px 20px;
  }
}