:root {
  /* Dark horror base (slightly plum-tinted black) */
  --bg-0: #05040a;
  --bg-1: #0b0812;
  --bg-2: #100c18;
  --panel: #0e0a14;
  --panel-soft: #15101f;
  /* Blood + stamp reds */
  --blood: #5c0f1a;
  --blood-bright: #9e1a32;
  --line: #4a0a14;
  --line-soft: #7a2440;
  /* 80s/90s accents — keep saturation low in use */
  --retro-pink: #e878a8;
  --retro-magenta: #c060b8;
  --retro-lavender: #9b7ec8;
  --crt-mint: #5ed4b8;
  --crt-cyan: #4ec4c8;
  --chrome: #f2e8f4;
  --chrome-dim: #c4b8cc;
  --text: #ebe4f0;
  --muted: #a898b8;
  --accent: #d8486e;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  color: var(--text);
  font-family: "VT323", monospace;
  background:
    /* CRT scanlines — mint + faint pink interlace */
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(94, 212, 184, 0.028) 2px,
      rgba(94, 212, 184, 0.028) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(232, 120, 168, 0.02) 4px,
      rgba(232, 120, 168, 0.02) 5px
    ),
    /* Soft sticker-adjacent glows: plum / pink / red */
    radial-gradient(ellipse 85% 50% at 50% -18%, rgba(158, 26, 50, 0.11), transparent 52%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(155, 126, 200, 0.08), transparent 50%),
    radial-gradient(ellipse 50% 42% at 100% 85%, rgba(232, 120, 168, 0.07), transparent 48%),
    radial-gradient(ellipse 70% 60% at 50% 120%, rgba(60, 20, 45, 0.35), transparent 55%),
    linear-gradient(200deg, #140c18 0%, var(--bg-2) 38%, var(--bg-0) 72%, #030205 100%);
}

.shrine-page {
  position: relative;
  z-index: 0;
  width: min(980px, 96vw);
  margin: 40px auto;
}

.shrine-placeholder {
  --sp-w: 46px;
  --sp-h: 46px;
  position: absolute;
  z-index: 8;
  width: var(--sp-w);
  height: var(--sp-h);
  object-fit: contain;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.sp-a {
  --sp-w: 44px;
  --sp-h: 44px;
  top: 6px;
  right: 12px;
}

.sp-b {
  --sp-w: auto;
  --sp-h: 150px;
  bottom: -60px;
  left: -100px;
}

.sp-c {
  --sp-w: auto;
  --sp-h: 300px;
  top: 0%;
  right: -300px;
}

.shrine-frame {
  position: relative;
  min-height: 650px;
  padding-left: 190px;
}

/* CRT stack on side figure — wrapper so ::before/::after can sit on top of <img> */
.ghostface-crt {
  position: absolute;
  left: -50px;
  bottom: 0;
  width: 320px;
  z-index: 5;
  pointer-events: none;
  line-height: 0;
  /* Same file as <img> — masks overlays to opaque pixels only (no “filter box”) */
  --ghostface-mask: url("assets/ghostface.png");
}

/* Shared: clip CRT layers to character alpha (must match img size/position) */
.ghostface-crt::before,
.ghostface-crt::after {
  -webkit-mask-image: var(--ghostface-mask);
  mask-image: var(--ghostface-mask);
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-mode: alpha;
}

.ghostface-crt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 65% at 50% 42%, transparent 32%, rgba(0, 0, 0, 0.5) 100%),
    linear-gradient(
      180deg,
      rgba(20, 8, 24, 0.35) 0%,
      transparent 28%,
      transparent 72%,
      rgba(8, 4, 14, 0.4) 100%
    );
  mix-blend-mode: multiply;
}

/* Horizontal scanlines + faint phosphor tint */
.ghostface-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.18) 2px,
      rgba(0, 0, 0, 0.18) 3px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(232, 120, 168, 0.04) 4px,
      rgba(232, 120, 168, 0.04) 5px
    ),
    linear-gradient(
      90deg,
      rgba(78, 196, 200, 0.06) 0%,
      transparent 18%,
      transparent 82%,
      rgba(192, 96, 184, 0.05) 100%
    );
  mix-blend-mode: soft-light;
  opacity: 0.85;
}

.ghostface-figure {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  /* Tube-TV: slight punch + mild RGB fringe + existing shrine glow */
  filter:
    contrast(1.09)
    saturate(1.12)
    brightness(0.97)
    drop-shadow(0.6px 0 0 rgba(255, 100, 130, 0.14))
    drop-shadow(-0.6px 0 0 rgba(70, 190, 210, 0.12))
    drop-shadow(0 0 1px rgba(242, 232, 244, 0.28))
    drop-shadow(0 0 12px rgba(192, 96, 184, 0.2))
    drop-shadow(0 0 16px rgba(158, 26, 50, 0.26))
    drop-shadow(0 8px 14px rgba(0, 0, 0, 0.85));
}

.shrine-content {
  position: relative;
  z-index: 2;
  width: min(760px, 100%);
  min-height: 650px;
  border: 3px solid var(--blood-bright);
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(165deg, rgba(155, 126, 200, 0.07) 0%, transparent 38%),
    linear-gradient(200deg, rgba(232, 120, 168, 0.05) 0%, transparent 45%),
    linear-gradient(165deg, rgba(94, 212, 184, 0.05) 0%, transparent 42%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.035), transparent 28%),
    var(--panel);
  box-shadow:
    inset 0 0 0 1px rgba(232, 200, 228, 0.1),
    inset 0 0 0 4px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 0 32px rgba(192, 96, 184, 0.12),
    0 0 24px rgba(158, 26, 50, 0.14),
    0 10px 40px rgba(0, 0, 0, 0.55);
}

.shrine-header {
  position: relative;
  padding: 22px 28px 10px;
  user-select: none;
}

.back-home {
  position: absolute;
  top: 18px;
  right: 28px;
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid var(--chrome);
  border-right-color: #2a080c;
  border-bottom-color: #2a080c;
  background: linear-gradient(180deg, #1a1424 0%, #0e0c12 100%);
  color: var(--chrome);
  text-decoration: none;
  font-size: 1.2rem;
  letter-spacing: 0.5px;
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.12),
    0 0 0 1px var(--blood-bright);
}

.back-home:hover {
  background: linear-gradient(180deg, #261c34 0%, #16101c 100%);
  color: var(--retro-pink);
}

.shrine-header h1 {
  margin: 0;
  color: var(--chrome);
  font-family: "Cinzel", serif;
  font-size: clamp(2.1rem, 5vw, 3rem);
  letter-spacing: 1px;
  text-shadow:
    2px 2px 0 #1a0508,
    -1px -1px 0 rgba(232, 120, 168, 0.28),
    0 0 20px rgba(192, 96, 184, 0.35),
    0 0 18px rgba(158, 26, 50, 0.45),
    0 0 38px rgba(78, 196, 200, 0.12);
}

.shrine-header p {
  margin: 4px 0 0;
  color: #d890b0;
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.95),
    0 0 14px rgba(192, 96, 184, 0.25);
}

.shrine-header img {
  image-rendering: auto;
  vertical-align: middle;
  margin-right: 4px;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.9));
}

.shrine-scroll {
  height: 500px;
  margin: 0 24px 24px;
  padding: 18px 16px 18px 18px;
  border: 2px solid var(--blood-bright);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(155, 126, 200, 0.06) 0%, transparent 24%),
    linear-gradient(180deg, rgba(232, 120, 168, 0.05) 0%, transparent 20%),
    linear-gradient(180deg, rgba(78, 196, 200, 0.04) 0%, transparent 22%),
    linear-gradient(180deg, rgba(158, 26, 50, 0.09), rgba(10, 8, 16, 0.94));
  overflow-y: scroll;
  line-height: 1.4;
  font-size: 1.55rem;
  scrollbar-gutter: stable;
  box-shadow: inset 0 0 0 1px rgba(200, 170, 210, 0.1);
}

.shrine-scroll p {
  margin: 0 0 14px;
}

.shrine-scroll ul {
  margin: 0 0 14px 20px;
  padding: 0;
}

.shrine-scroll li {
  margin-bottom: 6px;
}

.shrine-scroll img.shrine-stamp {
  width: 89px;
  height: 46px;
  object-fit: contain;
  object-position: center;
  vertical-align: middle;
  margin-right: 6px;
}

.shrine-scroll p img.shrine-stamp:last-child,
.shrine-scroll li img.shrine-stamp:last-child {
  margin-right: 0;
}

/* Decorative UI elements (like red divider gif) should not be interactive */
.shrine-scroll img.shrine-ui {
  pointer-events: none;
  user-select: none;
}

.shrine-scroll::-webkit-scrollbar {
  width: 16px;
}

.shrine-scroll::-webkit-scrollbar-track {
  background: #08090e;
  border: 1px solid var(--blood);
  border-radius: 2px;
}

.shrine-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a02848, #5c1020);
  border: 2px solid var(--chrome-dim);
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(232, 120, 168, 0.35),
    inset 0 -1px 0 rgba(78, 196, 200, 0.15);
}

@media (max-width: 900px) {
  .shrine-frame {
    padding-left: 0;
    min-height: 0;
  }

  .shrine-placeholder {
    display: none;
  }

  .ghostface-crt {
    display: none;
  }

  .shrine-content {
    width: 100%;
    min-height: 0;
  }

  .shrine-scroll {
    height: 420px;
  }

  .back-home {
    position: static;
    margin-bottom: 10px;
  }
}