/* What each monster does to the quiz card itself (stage 2+, stronger in stage 3). */
.creep .card::before, .creep .card::after { pointer-events: none; }

/* vampire: blood running off the top edge */
.creep.m-vampire .card { padding-top: 46px; }
.creep.m-vampire .card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath fill='%238a0015' d='M0 0H200V6C196 6 195 10 193 10C190 10 190 6 186 6H160C156 6 156 28 152 28C148 28 148 6 144 6H120C117 6 117 14 114 14C111 14 111 6 108 6H70C66 6 66 34 62 34C58 34 58 6 54 6H30C27 6 27 18 24 18C21 18 21 6 18 6H0Z'/%3E%3C/svg%3E") repeat-x top / 200px 40px;
}
.creep.m-vampire .card { box-shadow: 0 0 0 1px var(--line), 0 20px 60px rgba(196, 16, 47, .25); }

/* aberration: the question can't hold its shape */
.creep.m-aberration .q-title { animation: wobble 5s ease-in-out infinite; }
.full.m-aberration .card { animation: breathe 6s ease-in-out infinite; }
.creep.m-aberration .card { box-shadow: 0 0 0 1px var(--line), 0 0 50px rgba(109, 255, 159, .15); }
@keyframes wobble { 0%, 100% { transform: skew(0); } 25% { transform: skew(-2deg, .5deg); } 75% { transform: skew(2deg, -.5deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.008) skewX(-.4deg); } }

/* werewolf: claw marks */
.full.m-werewolf .card::after {
  content: ''; position: absolute; right: 4%; top: 12%; width: 180px; height: 180px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='%237a0f0f'%3E%3Cpath d='M30 4C38 40 52 80 78 116L74 118C46 84 30 44 26 6Z'/%3E%3Cpath d='M50 0C58 38 72 78 98 114L94 116C66 82 50 42 46 2Z'/%3E%3Cpath d='M70 2C78 36 90 70 112 104L108 106C86 74 70 40 66 4Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* zombie: stains, and the title shuffles */
.creep.m-zombie .card { background-image: radial-gradient(circle at 85% 20%, rgba(90, 110, 40, .25), transparent 30%), radial-gradient(circle at 10% 90%, rgba(70, 50, 20, .35), transparent 35%); }
.full.m-zombie .q-title { animation: shamble 4s ease-in-out infinite; }
@keyframes shamble { 0%, 100% { transform: translate(0, 0) rotate(0); } 30% { transform: translate(2px, 1px) rotate(.4deg); } 60% { transform: translate(-1px, 2px) rotate(-.3deg); } }

/* ghost: a card you can almost see through */
.creep.m-ghost .card { background-color: color-mix(in srgb, var(--card) 76%, transparent); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.creep.m-ghost .q-title { animation: fade-breathe 7s ease-in-out infinite; }
@keyframes fade-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }

/* wendigo: frost creeping in from the edges */
.creep.m-wendigo .card { box-shadow: inset 0 0 40px rgba(200, 230, 255, .2), 0 0 0 1px rgba(200, 230, 255, .3), 0 20px 60px rgba(0, 0, 0, .6); }
.full.m-wendigo .card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 0 0, rgba(230, 245, 255, .3), transparent 25%), radial-gradient(circle at 100% 100%, rgba(230, 245, 255, .25), transparent 25%);
}

/* succubus / incubus: a soft glow */
.creep.m-succubus .card { box-shadow: 0 0 0 1px var(--line), 0 0 60px rgba(255, 63, 164, .25); }

/* devil: the card becomes a contract */
.creep.m-devil .card {
  padding-bottom: 66px; border: 3px double var(--line);
  background-image: radial-gradient(ellipse at 15% 10%, rgba(255, 255, 255, .45), transparent 50%), radial-gradient(ellipse at 90% 95%, rgba(120, 60, 20, .3), transparent 55%), radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(90, 40, 10, .25));
}
.creep.m-devil .card::after {
  content: '✗ ______________________________'; position: absolute; left: 24px; bottom: 22px;
  color: var(--muted); font-family: var(--font-display); font-size: 16px; white-space: nowrap;
}

/* demon: red edge, and the title sometimes turns upside down */
.creep.m-demon .card { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 40px rgba(255, 42, 26, .25); }
.full.m-demon .q-title.flip { transform: rotate(180deg); }

/* basilisk: hovering an answer turns it to stone */
.creep.m-basilisk .opt:hover { filter: grayscale(1) brightness(1.3) contrast(.8); background-color: #6f746e; color: #1d201d; }

/* giant spider: a web in the corner */
.creep.m-spider .card::before {
  content: ''; position: absolute; right: 0; top: 0; width: 130px; height: 130px; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23ffffff' stroke-opacity='.4' stroke-width='.7'%3E%3Cpath d='M100 0L0 0M100 0L10 40M100 0L30 75M100 0L60 95M100 0L100 100M80 0Q84 14 92 18Q96 22 100 20M60 0Q66 24 80 34Q92 42 100 40M40 0Q48 34 70 50Q86 62 100 62M20 0Q30 46 60 68Q80 82 100 84'/%3E%3C/svg%3E") no-repeat top right / contain;
}

/* onryō: VHS colour bleed and a jittering title */
.creep.m-onryo .q-title { text-shadow: 2px 0 rgba(255, 0, 60, .6), -2px 0 rgba(0, 200, 255, .6); animation: vhs 3s steps(1) infinite; }
.creep.m-onryo .card::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px); }
@keyframes vhs { 0%, 90%, 100% { transform: translate(0); } 92% { transform: translate(-3px, 1px); } 94% { transform: translate(4px, 0); } 96% { transform: translate(-1px, -1px); } }

/* mummy: papyrus and bandage strips */
.creep.m-mummy .card { background-image: radial-gradient(ellipse at 20% 10%, rgba(255, 255, 255, .35), transparent 50%), radial-gradient(ellipse at 85% 90%, rgba(100, 70, 20, .25), transparent 55%); }
.creep.m-mummy .card::before, .creep.m-mummy .card::after {
  content: ''; position: absolute; width: 240px; height: 30px; opacity: .92; box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .07) 0 3px, transparent 3px 9px), #efe3c6;
}
.creep.m-mummy .card::before { left: -70px; top: 22px; transform: rotate(-35deg); }
.creep.m-mummy .card::after { right: -70px; bottom: 26px; transform: rotate(-35deg); }

/* invisible man: the page stops bothering to show itself */
.creep.m-invisible .card { border-color: transparent; box-shadow: none; background-color: color-mix(in srgb, var(--card) 60%, transparent); }
.creep.m-invisible .opt { border-color: transparent; }
.full.m-invisible .site-header, .full.m-invisible .sidebar, .full.m-invisible .article-head { opacity: .15; }
.m-invisible #vignette { background: radial-gradient(ellipse at center, transparent 40%, rgba(255, 255, 255, .95) 100%); }

/* kaiju: hazard tape, and the card lands with a thud */
.creep.m-kaiju .layout { padding-top: 58px; }
.creep.m-kaiju .card { padding-top: 34px; }
.creep.m-kaiju .card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(-45deg, #ffcc00 0 14px, #111 14px 28px); }
.card.stomp { animation: stomp .5s ease-out; }
@keyframes stomp { 0% { transform: translateY(-14px); } 40% { transform: translateY(3px); } 60% { transform: translateY(-2px); } 100% { transform: translateY(0); } }

/* sea monster: everything floats */
.creep.m-sea .card { background-color: color-mix(in srgb, var(--card) 85%, transparent); }
.full.m-sea .card { animation: bob-card 6s ease-in-out infinite; }
@keyframes bob-card { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(.5deg); } }

/* ghoul: something took a bite */
.creep.m-ghoul .card {
  -webkit-mask: radial-gradient(circle 26px at calc(100% - 10px) 30px, #0000 98%, #000), radial-gradient(circle 22px at calc(100% - 44px) 6px, #0000 98%, #000), radial-gradient(circle 20px at calc(100% - 2px) 66px, #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 26px at calc(100% - 10px) 30px, #0000 98%, #000), radial-gradient(circle 22px at calc(100% - 44px) 6px, #0000 98%, #000), radial-gradient(circle 20px at calc(100% - 2px) 66px, #0000 98%, #000);
  mask-composite: intersect;
}

/* yōkai: washi paper and a red seal */
.creep.m-yokai .card::before { content: ''; position: absolute; inset: 0; background: var(--noise); background-size: 220px; opacity: .14; mix-blend-mode: multiply; }
.creep.m-yokai .card::after {
  content: '妖'; position: absolute; right: 16px; bottom: 14px; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 6px; background: var(--accent); color: #fff;
  font-family: 'Yuji Syuku', serif; font-size: 26px; transform: rotate(-8deg); opacity: .85;
}
.creep.m-yokai .card { padding-bottom: 66px; }