:root {
  --bg: #050304;
  --panel: #120a0d;
  --panel2: #1a0e12;
  --line: #3b1a22;
  --text: #eae0d2;
  --muted: #9a8689;
  --blood: #8a0712;
  --blood2: #e3142a;
  --bone: #e9dfcc;
  --gold: #c9a24a;
  --ghost: #8fe3ff;
  --ok: #b9f5c0;
  --title: 'Rubik Wet Paint', 'Creepster', 'Chiller', Impact, serif;
  --scary: 'Rubik Distressed', 'Rubik Burned', 'Rubik', Impact, sans-serif;
  --glitch: 'Rubik Glitch', 'Rubik', sans-serif;
  --body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(ellipse at 50% 120%, #2a0509 0%, transparent 55%), radial-gradient(ellipse at 50% -20%, #1d0a10 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
.title { font-family: var(--title); font-weight: 400; letter-spacing: .02em; }
.scary { font-family: var(--scary); font-weight: 400; }
.muted { color: var(--muted); }
.blood { color: var(--blood2); text-shadow: 0 0 12px #e3142a88, 0 3px 0 #4a0007; }

.ava {
  display: inline-grid; place-items: center; border-radius: 50%;
  width: 2.4em; height: 2.4em; font-size: 1em; flex: none;
  border: 3px solid var(--c, #888); background: radial-gradient(#2a1418, #050203); position: relative;
  box-shadow: 0 0 10px #000, inset 0 0 10px #000;
}
.ava.ghost { border-style: dashed; border-color: var(--ghost); filter: grayscale(1) brightness(1.2) drop-shadow(0 0 6px #8fe3ffaa); opacity: .7; animation: floaty 3.5s ease-in-out infinite; }
.ava.ghost::after { content: '👻'; position: absolute; right: -.45em; bottom: -.35em; font-size: .7em; filter: none; }

/* киноплёнка, туман, виньетка */
.fx { position: fixed; inset: 0; pointer-events: none; }
.vignette { background: radial-gradient(ellipse at center, transparent 45%, #000000c0 85%, #000 100%); z-index: 50; }
#grain { width: 100%; height: 100%; opacity: .05; mix-blend-mode: screen; z-index: 51; }
.fog, .fog2 { z-index: 1; opacity: .22; filter: blur(30px);
  background: radial-gradient(ellipse 40% 25% at 20% 80%, #6a5f6a 0%, transparent 70%), radial-gradient(ellipse 35% 20% at 70% 90%, #554a55 0%, transparent 70%), radial-gradient(ellipse 30% 18% at 45% 70%, #4a3f4a 0%, transparent 70%);
  animation: fog 38s linear infinite alternate; }
.fog2 { opacity: .15; animation-duration: 55s; animation-direction: alternate-reverse; transform: scaleX(-1); }
#flash { background: #dfe8ff; opacity: 0; z-index: 60; mix-blend-mode: screen; }
#redpulse { z-index: 49; box-shadow: inset 0 0 0 0 #e3142a00; }
#redpulse.on { animation: redpulse 1s ease-out infinite; }
.drips { position: fixed; top: 0; left: 0; right: 0; height: 0; z-index: 52; pointer-events: none; }
.drips::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; background: linear-gradient(#3a0005, #7a0410); }
.drip { position: absolute; top: 0; width: var(--w); height: var(--h0); background: linear-gradient(#5a0008, #9b0618 85%, #b30a1e); border-radius: 0 0 999px 999px; animation: drip var(--d) cubic-bezier(.6,0,.9,.6) infinite; animation-delay: var(--delay); box-shadow: inset -2px 0 3px #00000066; }

@keyframes fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
@keyframes drip { 0% { height: var(--h0); } 70% { height: var(--h); } 100% { height: var(--h); } }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes redpulse { 0% { box-shadow: inset 0 0 120px 30px #e3142a77; } 100% { box-shadow: inset 0 0 60px 0 #e3142a00; } }
@keyframes pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes shake { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-7px,3px) } 40% { transform: translate(6px,-4px) } 60% { transform: translate(-5px,-2px) } 80% { transform: translate(4px,4px) } }
@keyframes jitter { 0%,100% { transform: translate(0,0) } 25% { transform: translate(-1px,1px) } 50% { transform: translate(1px,-1px) } 75% { transform: translate(-1px,-1px) } }
@keyframes glitchIn {
  0% { opacity: 0; clip-path: inset(40% 0 45% 0); transform: translateX(-30px) skewX(20deg); filter: hue-rotate(90deg) contrast(3); }
  20% { opacity: 1; clip-path: inset(10% 0 70% 0); transform: translateX(25px); }
  40% { clip-path: inset(60% 0 5% 0); transform: translateX(-12px) skewX(-10deg); filter: hue-rotate(-60deg); }
  60% { clip-path: inset(0 0 0 0); transform: translateX(6px); filter: contrast(1.6); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; filter: none; }
}
@keyframes emerge { from { opacity: 0; filter: blur(10px); transform: translateY(8px) scale(1.04); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes ghostout { 0% { filter: none; transform: scale(1); } 30% { filter: brightness(3) contrast(2); transform: scale(1.3) rotate(-6deg); } 100% { filter: grayscale(1) brightness(1.2) drop-shadow(0 0 8px #8fe3ff); transform: scale(1); } }
.pop { animation: pop .35s cubic-bezier(.2,1.4,.5,1) both; }
.glitch-in { animation: glitchIn .6s ease-out both; }
.emerge { animation: emerge .7s ease-out both; }
.jitter { animation: jitter .12s steps(2) infinite; }