/* The blood shrine. Nothing is tilted: the user's aesthetic bible forbids slanting things for character. */

body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  background: #050000 url("img/outer-bg.jpg") center top fixed;
  background-size: cover;
  color: #eee; font: 14px Verdana, sans-serif;
  cursor: url("img/blood-cursor.png"), auto;
}

/* ---- custom animated blood dripping cursor ---- */
#custom-blood-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 98px;
  pointer-events: none;
  z-index: 999999;
  display: none;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}
#custom-blood-cursor img {
  width: 38px;
  height: 98px;
  display: block;
}

@media (hover: hover) and (pointer: fine) {
  body, a, button, select, input, [role="button"], #player-spot * {
    cursor: none !important;
  }
}

/* ---- locked 800px shrine frame ---- */
.shrine-wrap {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  border-left: 3px double #8e0000;
  border-right: 3px double #8e0000;
  background: #1a0a06;
  box-shadow: 0 0 0 1px #000, 10px 0 0 #000, -10px 0 0 #000;
}

.back {
  position: fixed; top: 8px; left: 8px;
  font: 11px Verdana, sans-serif; color: #000; text-decoration: none;
  background: #c0c0c0; padding: 3px 8px;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.back:active { box-shadow: inset 1px 1px #000, inset -1px -1px #fff; }

/* the title: BLOOD with a falling drop on each side */
.title { margin: 20px 0 10px; display: flex; justify-content: center; align-items: center; gap: 16px; }
.title .word { width: min(500px, 60vw); height: auto; }
.title .drop { width: min(92px, 12vw); height: auto; }

/* the dripping curtain across the top of the page, tiled sideways */
.curtain { position: relative; z-index: 2; height: 64px; margin-bottom: -44px; background: url("img/blood-curtain.png") repeat-x; }

/* splatters stay in the lower side spaces; the center is reserved for a third quote */
.splatters { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; z-index: 1; pointer-events: none; overflow: hidden; }
.splatters img { position: absolute; height: auto; }
/* layers: section backgrounds, then splatters (1), then everything on the page (2), back button on top (3) */
.title, .title-drips { position: relative; z-index: 2; }
.back { z-index: 5; }
.title-drips { display: block; margin: 0 auto 20px; max-width: 100%; }

/* screens: the first is deep blood red, the rest are the swirl */
.screen { position: relative; }
.deep { box-sizing: border-box; padding-bottom: 20px; background: #5c0000; }
.swirl { padding: 30px 4vw 10px; box-sizing: border-box; background: #120000 url("img/bgbloodswirl.gif"); }

/* ---- blood moon: one row, mostly a countdown ---- */
.moon-section {
  position: relative;
  z-index: 3;
  background: #000;
  padding: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.moon-icon {
  width: 90px;
  height: 90px;
  display: block;
  flex: 0 0 auto;
}
.moon-countdown-label {
  font: bold 12px "Trebuchet MS", Verdana, sans-serif;
  letter-spacing: 1px;
  color: #b22222;
}
.moon-countdown-value {
  font: bold 34px "Courier New", monospace;
  color: #ff4500;
  letter-spacing: 1px;
}
.moon-countdown-date {
  font: 13px "Times New Roman", serif;
  color: #8b0000;
}
.moon-folklore {
  display: block;
  background: #000;
  padding: 6px 0;
  font: 12px "Comic Sans MS", cursive, sans-serif;
  color: #9c2b2b;
}
@keyframes blink {
  50% { opacity: 0; }
}
@media (max-width: 640px) {
  .moon-countdown-value { font-size: 24px; }
}

/* quote, fountain, quote under the title: red text straight on the background */
.fountain-row { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 32px; padding: 10px 16px 12px; }
.fountain-row blockquote { flex: 1; max-width: 280px; margin: 0; color: #f00000; }
.fountain-row p { margin: 0 0 10px; }
.fountain-row cite { font: italic 14px Georgia, serif; }
.quote-left { text-align: right; transform: translateY(-24px); }
.quote-left p {
  font: 30px/1.2 "UnifrakturMaguntia", serif;
  color: #ff1c00;
  text-shadow: -2px 2px 0 #180000;
}
.quote-left cite { color: #d20a00; }
.quote-right { text-align: left; }
.quote-right p {
  font: italic 24px/1.3 "IM Fell English", Georgia, serif;
  color: #ed0000;
  text-shadow: 2px 2px 0 #180000;
}
.quote-right cite { color: #ff3d00; }
.fountain-center { flex: 0 1 430px; display: flex; flex-direction: column; align-items: center; }
.fountain-row .quote-center { width: 430px; max-width: 90vw; margin: 14px 0 0; text-align: center; }
.quote-center p {
  font: normal 19px/1.35 "Special Elite", "Courier New", monospace;
  color: #ff2f00;
  text-shadow: 0 2px 0 #180000;
}
.quote-center .translation { display: block; margin-top: 5px; color: #cf0000; font-size: 16px; }
.quote-center cite { color: #a80000; }
.fountain { width: min(360px, 90vw); height: auto; }
@media (max-width: 800px) {
  .fountain-row { flex-direction: column; }
  .quote-left, .quote-right { text-align: center; max-width: 90vw; }
}

/* bloodsuckers section */
.bloodsuckers-section {
  position: relative;
  z-index: 2;
  max-width: 1020px;
  margin: 40px auto 50px;
}
.bloodsuckers-title-wrap {
  text-align: center;
  margin-bottom: 30px;
}
.bloodsuckers-drip-bar {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.bloodsuckers-title {
  margin: 14px 0;
  font: 62px/1 "Pirata One", serif;
  color: #ff0000;
  letter-spacing: 2px;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     4px  4px 0 #200000;
}
/* ---- bloodsuckers content wrapper ---- */
.bloodsuckers-content {
  padding: 15px 0 10px;
}

/* ---- bloodsuckers gallery ---- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: start;
  margin: 20px 0 25px;
}
.gallery figure {
  margin: 0;
  background: #000;
  border: 1px solid #440000;
  display: flex;
  flex-direction: column;
}
.gallery img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery figcaption {
  order: -1;
  background: #1a0202;
  color: #fff;
  font: bold 11px Verdana, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  padding: 5px 4px;
  border-bottom: 1px solid #440000;
}
@media (max-width: 600px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .bloodsuckers-title { font-size: 44px; }
}

/* ---- old-school text highlight: a background hugging just the text, not a whole box.
   box-decoration-break makes wrapped lines each get their own background strip. ---- */
.hl {
  background: #000;
  padding: 1px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- fun facts ---- */
.facts {
  margin: 25px auto;
  padding: 0 14px;
  list-style: square;
  font: 13px/1.6 Verdana, sans-serif;
  color: #ddd;
}
.facts li {
  margin-bottom: 12px;
}
.facts b {
  color: #ff3300;
}

/* ---- rabbit ---- */
.rabbit-box {
  margin: 25px auto 10px;
  text-align: center;
}
.rabbit-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
}
.rabbit-badge {
  width: 100px;
  height: auto;
  display: block;
}
.rabbit-q {
  font: italic 22px Georgia, serif;
  color: #ff4400;
  margin: 0;
}
.rabbit-photos {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: flex-start;
}
.rabbit-photos figure {
  margin: 0;
  flex: 1;
  background: #000;
  border: 1px solid #440000;
  display: flex;
  flex-direction: column;
}
.rabbit-photos .bunnicula-fig {
  flex: 0 0 115px;
  max-width: 115px;
}
.rabbit-photos img {
  width: 100%;
  height: auto;
  display: block;
}
.rabbit-photos figcaption {
  order: -1;
  font: 11px Verdana, sans-serif;
  color: #ddd;
  background: #1a0202;
  padding: 5px 4px;
  border-bottom: 1px solid #440000;
  text-align: center;
}
.rabbit-box p {
  font: 13px/1.5 Verdana, sans-serif;
  color: #ccc;
  margin: 12px 0 0;
  text-align: left;
}
@media (max-width: 600px) {
  .rabbit-photos { flex-direction: column; align-items: center; }
  .rabbit-photos .bunnicula-fig { max-width: 160px; }
}

/* lead-in inside console */
.last-least {
  text-align: center;
  font: italic 18px Georgia, serif;
  color: #ff3300;
  margin: 16px 0 4px;
}

/* ---- divider between sections: tiled at native resolution so it fills edge-to-edge
   without stretching. Each gif has a solid opaque strip along the top (the "ceiling" the
   drips hang from) which never blends with whatever's above it, so it's cropped out of view
   by shrinking the box below the gif's native height and shifting background-position up
   by that same amount -- only the actual dripping icicle shapes remain visible, and the
   div's own background-color (matching the section below) shows through the transparent gaps. ---- */
.drip-break {
  background-repeat: repeat-x;
}
/* alternateblooddrip.gif is 480x20 native, opaque top band is 3px */
.drip-break--to-moon {
  height: 17px;
  background-color: #000;
  background-image: url("gif/alternateblooddrip.gif");
  background-position: 0 -3px;
}
/* 2-blood-drip-bar-3.gif is 532x24 native, opaque top band is 2px */
.drip-break--to-leeches {
  height: 22px;
  background-color: #100202;
  background-image: url("gif/2-blood-drip-bar-3.gif");
  background-position: 0 -2px;
}

/* ---- new background section: leeches ---- */
.leeches-screen {
  background: #100202; /* dark almost black dark red */
  padding: 16px 20px 60px;
  box-sizing: border-box;
}
.leeches-title {
  text-align: center;
  font: 56px/1 "Pirata One", serif;
  color: #ff0000;
  letter-spacing: 2px;
  margin: 4px 0 20px;
}
/* leech section: text with photos floated beside it, old-web style */
.leech-collage { max-width: 1020px; margin: 0 auto; font: 13px/1.6 Verdana, sans-serif; color: #ddd; }
.leech-collage::after { content: ""; display: block; clear: both; }
.leech-fig { display: flow-root; margin: 0 0 14px; background: #000; border: 1px solid #440000; }
.leech-fig.left { float: left; margin-right: 14px; }
.leech-fig.right { float: right; margin-left: 14px; }
.leech-fig img { width: 100%; display: block; }
.leech-fig figcaption { background: #1a0202; color: #fff; font: bold 11px Verdana, sans-serif; text-transform: uppercase; text-align: center; padding: 5px 4px; }

/* ---- one section per blood oddity: shared layout, each gets its own background and fonts ---- */
.drip-break--topic { height: 17px; background-image: url("gif/alternateblooddrip.gif"); background-position: 0 -3px; }
.topic { padding: 24px 20px 40px; text-align: center; }
.topic h2 { margin: 0 0 16px; font-weight: normal; }
.topic h2 img { height: 60px; vertical-align: middle; margin: 0 14px; }
.topic p { max-width: 700px; margin: 0 auto; }
.topic-photo { display: block; width: min(560px, 100%); height: auto; margin: 0 auto 16px; border: 3px ridge #2f7a1a; }


.lizards { background: #031a06; color: #b6ff7a; font: 22px/1.4 "VT323", monospace; }
.lizards h2 { font: 54px "Metal Mania", cursive; color: #7fff00; text-shadow: 0 0 10px #3f0; }
.lizards h2 .mirror { transform: scaleX(-1); }





/* ---- under construction placeholder (troll section parked, see blood-shrine-plan.md) ---- */
.construction-screen {
  background: #000;
  padding: 20px 20px 40px;
  box-sizing: border-box;
  text-align: center;
}
.construction-stripe {
  height: 18px;
  background: repeating-linear-gradient(45deg, #000 0 12px, #ffcc00 12px 24px);
  margin: 0 -20px;
}
.construction-title {
  margin: 24px 0;
  font: bold 30px Impact, Haettenschweiler, sans-serif;
  letter-spacing: 1px;
  color: #ffcc00;
  animation: blink 1s steps(1) infinite;
}
.construction-troll {
  max-width: 280px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 24px;
}
.coming-soon {
  max-width: 320px;
  margin: 0 auto 24px;
  font: 13px Verdana, sans-serif;
  color: #ccc;
}
.coming-soon-label {
  margin: 0 0 6px;
  font-weight: bold;
  color: #ffcc00;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.coming-soon-list {
  margin: 0;
  padding: 0 0 0 18px;
  list-style: square;
  text-align: left;
}
.coming-soon-list li {
  margin-bottom: 4px;
}
.coming-soon-more {
  margin: 8px 0 0;
  font-style: italic;
  color: #999;
}

/* the blood pool at the very bottom */
.pool { position: relative; z-index: 2; background: #120000 url("img/bgbloodswirl.gif"); line-height: 0; text-align: center; }
.pool img { width: 100%; height: auto; }

/* ---- the Webamp player ----
   Webamp centers itself on this bottom-left target, then controls its own windows so they remain draggable. */
#player-spot { position: fixed; left: 8px; bottom: 8px; width: 275px; height: 232px; }
#webamp { z-index: 4 !important; width: 275px; height: 232px; }
@media (max-width: 600px) {
  #webamp { height: 116px; }
  #webamp #playlist-window { display: none; }
}