@import url('https://fonts.googleapis.com/css2?family=VT323&family=Courier+Prime&family=Special+Elite&display=swap');

:root {
  --pk: #ffadd6;
  --dpk: #ff69b4;
  --red: #cc0000;
  --dred: #660000;
  --lav: #ddaaff;
  --cream: #fff0f5;
  --mint: #aaffdd;
  --gold: #ffdd88;
  --teal: #008080;
}

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

body {
  background-color: #110008;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255,100,180,0.03) 2px,
      rgba(255,100,180,0.03) 4px
    );
  font-family: 'Courier Prime', monospace;
  color: var(--pk);
  overflow-x: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ctext y='14' font-size='14'%3E%E2%9C%82%3C/text%3E%3C/svg%3E") 8 8, crosshair;
}

#bgwrap {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
  opacity: 0.18;
  mix-blend-mode: screen;
}
#bgwrap img {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0,0,0,0.12) 3px,
    rgba(0,0,0,0.12) 4px
  );
}

#page {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 8px;
}

@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.blink  { animation: blink 1.0s step-end infinite; }
.blink2 { animation: blink 0.5s step-end infinite; }

.mq {
  background: var(--dred);
  border-top: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  color: var(--pk);
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
}
.mq-inner  { display:inline-block; animation: mscroll  18s linear infinite; }
.mq-inner2 { display:inline-block; animation: mscroll2 24s linear infinite; }
@keyframes mscroll  { from{transform:translateX(100vw)} to{transform:translateX(-100%)} }
@keyframes mscroll2 { from{transform:translateX(-100%)} to{transform:translateX(100vw)} }

#header {
  text-align: center;
  padding: 18px 8px 0;
  position: relative;
}

.site-name {
  font-family: 'VT323', monospace;
  font-size: clamp(2.8rem, 9vw, 5.5rem);
  color: var(--pk);
  text-shadow: 0 0 8px var(--dpk), 0 0 20px rgba(255,105,180,0.7), 3px 3px 0 var(--dred);
  line-height: 1;
  letter-spacing: 0.06em;
  animation: glitch 7s infinite;
}
@keyframes glitch {
  0%,95%,100% { text-shadow: 0 0 8px var(--dpk), 3px 3px 0 var(--dred); transform: translate(0); }
  96% { transform: translate(-3px,1px); text-shadow: 3px 0 var(--red), -3px 0 var(--lav); }
  97% { transform: translate(3px,-1px); text-shadow: -3px 0 var(--red), 3px 0 var(--lav); }
  98% { transform: translate(0,2px); }
  99% { transform: translate(-2px,0); }
}

.under-title {
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--lav);
  letter-spacing: 0.3em;
  margin-top: 2px;
}

.counter-bar {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  color: var(--mint);
  padding: 6px;
  flex-wrap: wrap;
}
.counter-box {
  border: 1px solid var(--teal);
  padding: 2px 10px;
  background: #000a06;
  letter-spacing: 0.1em;
}

.nav-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-family: 'VT323', monospace;
  font-size: 1.05rem;
}
.nav-table td {
  border: 1px solid var(--dpk);
  text-align: center;
  padding: 4px 8px;
  background: rgba(80,0,40,0.7);
}
.nav-table a { color: var(--pk); text-decoration: none; letter-spacing: 0.1em; }
.nav-table a:hover { color: var(--gold); text-decoration: underline; }

.box {
  border: 2px solid var(--dpk);
  background: rgba(20,0,15,0.75);
  margin: 14px 0;
}
.box-title {
  background: var(--dpk);
  color: #1a0010;
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  padding: 3px 10px;
  text-transform: uppercase;
}
.box-body { padding: 12px 14px; }

.float-l { float: left; margin: 0 14px 10px 0; }
.float-r { float: right; margin: 0 0 10px 14px; }
.clear   { clear: both; }

.item-img {
  border: 3px double var(--dpk);
  background: #1a0010;
  padding: 4px;
  display: block;
}
.item-img img {
  display: block;
  max-width: 160px;
  width: 100%;
}
.img-caption {
  font-family: 'VT323', monospace;
  font-size: 0.85rem;
  color: var(--lav);
  text-align: center;
  border-top: 1px dotted var(--dpk);
  padding: 2px 0 0;
  letter-spacing: 0.1em;
}

.body-txt { font-size: 0.82rem; line-height: 1.75; color: #ffcce8; }
.body-txt b { color: var(--pk); }

.gore-stamp {
  display: inline-block;
  border: 2px solid var(--red);
  background: #300000;
  color: var(--red);
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  padding: 3px 10px;
  margin: 6px 4px;
  text-transform: uppercase;
  transform: rotate(var(--rot, -1deg));
  box-shadow: 2px 2px 0 var(--dred);
}

.poem {
  font-family: 'Special Elite', cursive;
  font-size: 0.9rem;
  color: #ff88bb;
  line-height: 1.9;
  padding: 10px 14px;
  border-left: 3px solid var(--red);
  background: rgba(80,0,20,0.4);
  margin: 10px 0;
  letter-spacing: 0.04em;
}
.poem em { color: var(--red); font-style: normal; font-size: 1.05em; }

.hearts {
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: 0.5em;
  padding: 5px 0;
  animation: hpulse 2s ease-in-out infinite;
}
@keyframes hpulse { 0%,100%{opacity:0.6} 50%{opacity:1} }

.drip-div {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 4px 0 12px;
}
.drip-div span {
  display: inline-block;
  width: 4px;
  border-radius: 0 0 40% 40%;
  background: linear-gradient(to bottom, var(--red), #330000);
  animation: dripfall var(--d,3s) ease-in infinite var(--dl,0s);
}
@keyframes dripfall {
  0%   { height:0; opacity:1; }
  70%  { height:var(--h,50px); opacity:1; }
  100% { height:var(--h,50px); opacity:0; transform:scaleY(0.1); }
}

.hr-fancy {
  border: none;
  text-align: center;
  font-size: 0.75rem;
  color: var(--dpk);
  letter-spacing: 0.4em;
  margin: 6px 0;
}
.hr-fancy::before { content: '· · · · · · · · · · · · · · · · · · · ·'; }

.abstract-zone {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  margin: 20px 0;
}
.az-item { position: absolute; }
.az-text {
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  color: var(--lav);
  text-shadow: 0 0 6px var(--lav);
  transform: rotate(var(--r, 0deg));
  white-space: nowrap;
  letter-spacing: 0.08em;
}
.az-text-red {
  font-family: 'Special Elite', cursive;
  font-size: 0.95rem;
  color: var(--red);
  transform: rotate(var(--r, 0deg));
  white-space: nowrap;
  max-width: 200px;
  line-height: 1.4;
}

.popup-box {
  border: 3px double var(--gold);
  background: #1a0a00;
  color: var(--gold);
  font-family: 'VT323', monospace;
  font-size: 1rem;
  padding: 8px 14px;
  margin: 12px auto;
  max-width: 400px;
  text-align: center;
  letter-spacing: 0.1em;
  animation: glowgold 3s ease-in-out infinite;
}
@keyframes glowgold {
  0%,100%{box-shadow:0 0 8px rgba(255,200,50,0.2)}
  50%{box-shadow:0 0 20px rgba(255,200,50,0.5)}
}

#footer {
  text-align: center;
  padding: 20px 8px 40px;
  font-family: 'VT323', monospace;
  font-size: 0.95rem;
  color: var(--lav);
  border-top: 2px dotted var(--dpk);
  margin-top: 20px;
  letter-spacing: 0.15em;
}

.bdrop {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  background: var(--red);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: bfall 1.8s ease-in forwards;
}
@keyframes bfall {
  0%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(90px) scale(0.4);}
}

@keyframes wave {
  0%,100%{transform:translateY(0);}
  25%{transform:translateY(-5px);}
  75%{transform:translateY(5px);}
}
.wc { display:inline-block; animation:wave 1.4s ease-in-out infinite; }
.wc:nth-child(1){animation-delay:0.00s}
.wc:nth-child(2){animation-delay:0.10s}
.wc:nth-child(3){animation-delay:0.20s}
.wc:nth-child(4){animation-delay:0.30s}
.wc:nth-child(5){animation-delay:0.40s}
.wc:nth-child(6){animation-delay:0.50s}
.wc:nth-child(7){animation-delay:0.60s}
.wc:nth-child(8){animation-delay:0.70s}
.wc:nth-child(9){animation-delay:0.80s}

@keyframes rainbow {
  0%{color:#ff6699} 20%{color:#ffaaff} 40%{color:#ffffaa}
  60%{color:#aaffdd} 80%{color:#aabbff} 100%{color:#ff6699}
}
.rainbow { animation: rainbow 3s linear infinite; }