body {
    background-color: #0a0a0a;
    margin: 0;
    font-family: 'Pixelify Sans', monospace;
    image-rendering: pixelated;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    font-size: 16px;
    background: #111;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    min-height: 100vh;
}

.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#background {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 60% 40%, rgba(40,30,60,0.18) 0%, rgba(0,0,0,0.7) 80%),
        repeating-linear-gradient(120deg, rgba(30,20,40,0.08) 0 2px, transparent 2px 8px),
        url('data:image/svg+xml;utf8,<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="g1" cx="50%" cy="50%" r="50%"><stop offset="0%25" stop-color="%23bfa" stop-opacity="0.12"/><stop offset="100%25" stop-color="%23000" stop-opacity="0"/></radialGradient></defs><ellipse cx="300" cy="300" rx="220" ry="120" fill="url(%23g1)"/></svg>') center/cover no-repeat;
    animation: bg-move 12s linear infinite alternate;
    box-shadow: 0 0 0 100vw rgba(0,0,0,0.45) inset;
}

@keyframes bg-move {
    0% { background-position: 0 0, 0 0, 0 0; }
    100% { background-position: 100px 80px, 40px 60px, 60px 40px; }
}

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    text-align: center;
    position: relative;
    z-index: 1;
}

#shadow-text {
    font-size: clamp(2.5rem, 8vw, 7rem);
    color: #fff;
    letter-spacing: 0.08em;
    cursor: default;
    -webkit-mask-image: radial-gradient(circle, black 30%, transparent 70%);
    mask-image: radial-gradient(circle, black 30%, transparent 70%);
    -webkit-mask-size: 0px 0px;
    mask-size: 0px 0px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: -webkit-mask-size 0.2s, mask-size 0.2s;
    will-change: mask-size, -webkit-mask-size, mask-position, -webkit-mask-position;
    position: relative;
}

#rune-overlay {
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: lighten;
    opacity: 0.12;
    filter: blur(0.5px) brightness(1.1);
    animation: runes-float 8s ease-in-out infinite alternate;
}
@keyframes runes-float {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(-8px) scale(1.04); }
}

#mist-overlay {
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.13;
    filter: blur(1.2px);
    animation: mist-float 10s ease-in-out infinite alternate;
}
@keyframes mist-float {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(10px) scale(1.03); }
}

.flicker {
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle at 55% 45%, #b3e0ff22 0%, #7ad0ff22 30%, #3a8edb11 60%, #0050a011 90%, rgba(0,0,32,0) 100%),
        url('data:image/svg+xml;utf8,<svg width="340" height="340" xmlns="http://www.w3.org/2000/svg"><defs><radialGradient id="c" cx="50%" cy="50%" r="50%"><stop offset="0%25" stop-color="%23fff" stop-opacity="0.04"/><stop offset="100%25" stop-color="%23000" stop-opacity="0"/></radialGradient></defs><ellipse cx="170" cy="170" rx="120" ry="60" fill="url(%23c)"/></svg>') center/cover no-repeat;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: none;
    z-index: 10;
    animation: flicker-animation 1.1s cubic-bezier(.7,0,.3,1) forwards;
    box-shadow: 0 0 40px 8px #7ad0ff22, 0 0 100px 30px #7ad0ff11;
    filter: blur(0.7px) saturate(1.1);
}

.flicker-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 11;
    border: 2px solid #7ad0ff55;
    box-shadow: 0 0 12px 2px #7ad0ff33;
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(0.7);
    animation: ripple-animation 1.05s cubic-bezier(.7,0,.3,1) forwards;
    background: radial-gradient(circle, rgba(122,208,255,0.07) 0%, rgba(0,0,32,0) 80%);
}

@keyframes flicker-animation {
    0% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.7) rotate(0deg);
        filter: blur(0.7px) saturate(1.1);
    }
    20% {
        opacity: 0.32;
        filter: blur(1.2px) saturate(1.1);
    }
    40% {
        opacity: 0.38;
        filter: blur(0.7px) saturate(1.1);
    }
    60% {
        opacity: 0.18;
        filter: blur(1.5px) saturate(1.1);
    }
    80% {
        opacity: 0.22;
        filter: blur(0.9px) saturate(1.1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.3) rotate(8deg);
        filter: blur(2.2px) saturate(1.05);
    }
}

@keyframes ripple-animation {
    0% {
        opacity: 0.22;
        transform: translate(-50%, -50%) scale(0.7);
        border-width: 2px;
    }
    60% {
        opacity: 0.11;
        border-width: 1px;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.5);
        border-width: 0.5px;
    }
}