/* Enter-screen tip effects, ported from voidlax.com's easter-eggs.css.
   Selectors retargeted from the old #enter-screen / #tip-text to this build's
   #splash / #splash-tip. */

/* The splash is monochrome by default (grayscale filter on #splash and
   #splash-canvas). Colored special tips are SUPPOSED to break that — when one is
   active we drop the grayscale so the blood red / miami pink / kira purple etc.
   come through. A colored tip adds .tip-color to #splash. */
#splash.tip-color { filter: none !important; }
#splash.tip-color #splash-canvas { filter: none !important; }
/* Evil xan floods the splash's own WebGL field red via the shader's uXan uniform,
   so the canvas must NOT be grayscaled (that would undo the red) — drop the filter
   on both the splash and its canvas while xan is active. */
#splash.evil-xan-theme { filter: none !important; }
#splash.evil-xan-theme #splash-canvas { filter: none !important; }
/* keep the title + warning tip above the drip overlay */
#splash.evil-xan-theme .splash-content { position: relative; z-index: 5; }

/* clickable links inside a tip */
#splash-tip .clickable-link {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 8px #fff, 0 0 15px #fff;
    transition: all 0.3s ease;
}
#splash-tip .clickable-link:hover {
    color: #fff;
    text-shadow: 0 0 12px #fff, 0 0 20px #fff;
}
#splash-tip.clickable-tip { cursor: pointer; }
/* interactive tips (clock, kira, behind...) must receive their own clicks instead
   of falling through to the enter handler — re-enable pointer events on them */
#splash-tip.tip-interactive { pointer-events: auto; }
#splash-tip.tip-interactive * { pointer-events: auto; }
#gaster-text { pointer-events: auto; }

/* obfuscated / redacted tip */
.obfuscated-tip {
    font-family: 'Courier New', monospace;
    color: #666;
    position: relative;
    overflow: hidden;
}
.obfuscated-tip::before {
    content: '████████████████████████████████████████████████████████████████████';
}

/* miami */
.miami-text {
    font-family: 'Press Start 2P', 'VT323', cursive;
    color: #FF00FF;
    text-shadow: 0 0 8px #00FFFF, 0 0 15px #00FFFF, 0 0 25px #FF00FF, 2px 2px 0px #000;
}

/* glitch (star glitcher callback) */
.glitch-text {
    position: relative;
    color: #fff;
    text-shadow: 1px 0 #ff00c1, -1px 0 #00fff9;
    animation: tip-glitch 1.4s infinite steps(2);
}
@keyframes tip-glitch {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-1px, 1px); }
    50% { transform: translate(1px, -1px); }
    75% { transform: translate(-1px, -1px); }
}

/* kira monologue */
#splash-tip.kira-tip {
    font-family: 'Passion One', 'Inter', sans-serif;
    font-weight: 700;
    color: #e5a9ff;
    text-shadow: 0 0 8px #d67bff, 0 0 15px #a329d6, 0 0 20px #a329d6;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    max-width: min(720px, 84vw);
    position: relative;
    z-index: 6;
}

/* ---- JoJo (Part 4 / Kira) flavour ------------------------------------- */

/* lurid Part 4 colour grade over the splash while the kira egg is live: a
   purple->cyan duotone wash + a hotter magenta pump on the monologue itself */
#splash.kira-jojo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(120, 20, 180, 0.32) 0%,
        rgba(60, 0, 110, 0.20) 45%,
        rgba(0, 160, 190, 0.26) 100%);
    mix-blend-mode: screen;
    animation: kira-grade-pulse 3.4s ease-in-out infinite;
}
@keyframes kira-grade-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
#splash.kira-jojo .splash-content { position: relative; z-index: 5; }
#splash.kira-jojo #splash-tip.kira-tip {
    color: #ff66e6;
    text-shadow: 0 0 10px #ff2db8, 0 0 22px #a329d6, 0 0 34px #00d8ff;
}

/* ゴゴゴゴ — the "menacing" aura, purple kana drifting up the screen */
.jojo-menacing {
    position: absolute;
    bottom: -3rem;
    z-index: 3;
    pointer-events: none;
    font-family: 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', sans-serif;
    font-weight: 900;
    color: rgba(180, 70, 230, 0.0);
    text-shadow: 0 0 12px rgba(190, 60, 240, 0.9), 0 0 26px rgba(120, 0, 180, 0.7);
    -webkit-text-stroke: 1px rgba(220, 140, 255, 0.55);
    animation: jojo-menacing-rise linear forwards;
}
@keyframes jojo-menacing-rise {
    0% { transform: translateY(0) scale(0.6); opacity: 0; }
    18% { opacity: 0.95; }
    80% { opacity: 0.85; }
    100% { transform: translateY(-78vh) scale(1.15); opacity: 0; }
}

/* stand-name title card that slams onto the screen */
.jojo-callout {
    position: fixed;
    top: 26%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-6deg);
    z-index: 99999;
    pointer-events: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: jojo-callout-slam 1.7s cubic-bezier(0.2, 1.4, 0.35, 1) forwards;
}
.jojo-callout-name {
    font-family: 'Passion One', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 7vw, 5rem);
    letter-spacing: 0.04em;
    color: #fff;
    -webkit-text-stroke: 3px #2a0030;
    text-shadow: 5px 5px 0 #a329d6, 8px 8px 0 #00d8ff;
    line-height: 0.9;
}
.jojo-callout-kana {
    font-family: 'Hiragino Kaku Gothic Pro', 'Yu Gothic', 'Meiryo', sans-serif;
    font-weight: 800;
    font-size: clamp(1rem, 2.6vw, 1.7rem);
    letter-spacing: 0.18em;
    color: #ffe14d;
    text-shadow: 2px 2px 0 #2a0030, 0 0 12px rgba(255, 100, 230, 0.8);
    margin-top: 6px;
}
@keyframes jojo-callout-slam {
    0% { transform: translate(-50%, -50%) rotate(-6deg) scale(2.4); opacity: 0; }
    14% { transform: translate(-50%, -50%) rotate(-6deg) scale(0.92); opacity: 1; }
    24% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.04); }
    34% { transform: translate(-50%, -50%) rotate(-6deg) scale(1); }
    82% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-6deg) scale(1.04); opacity: 0; }
}

/* manga speed-lines + バーン burst on the explosion */
.manga-burst {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 99998;
    pointer-events: none;
}
.manga-lines {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200vmax;
    height: 200vmax;
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    /* white wedge speed-lines radiating from centre */
    background: repeating-conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.95) 0deg 2.2deg,
        rgba(255, 255, 255, 0) 2.2deg 6deg);
    -webkit-mask-image: radial-gradient(circle, transparent 4%, #000 14%, #000 40%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 4%, #000 14%, #000 40%, transparent 60%);
    animation: manga-lines-pop 1.1s ease-out forwards;
}
@keyframes manga-lines-pop {
    0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1) rotate(8deg); opacity: 0; }
}
.manga-ban {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0);
    font-family: 'Passion One', 'Arial Black', sans-serif;
    font-weight: 900;
    font-size: clamp(2.6rem, 8vw, 6rem);
    color: #fff;
    -webkit-text-stroke: 4px #1a001f;
    text-shadow: 4px 4px 0 #ff2db8, 7px 7px 0 #00d8ff;
    white-space: nowrap;
    animation: manga-ban-pop 1.1s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
@keyframes manga-ban-pop {
    0% { transform: translate(-50%, -50%) rotate(-10deg) scale(0); opacity: 0; }
    22% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.15); opacity: 1; }
    36% { transform: translate(-50%, -50%) rotate(-10deg) scale(0.98); }
    78% { opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-10deg) scale(1.1); opacity: 0; }
}

/* gaster wingdings */
#gaster-text {
    font-family: 'Wingdings', 'Standard Symbols L', 'Webdings', 'Apple Symbols', sans-serif;
    font-size: 2.2rem;
    letter-spacing: 15px;
    color: #fff;
    margin-top: 15px;
    opacity: 0.8;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.3), 0 0 25px rgba(255, 255, 255, 0.1);
    min-height: 40px;
}

/* evil xan trap — the blood-red animated field is done by the splash shader
   (uXan); the canvas just must NOT be grayscaled while it's active. */
#splash.evil-xan-theme { overflow: hidden; }
#splash.evil-xan-theme,
#splash.evil-xan-theme #splash-canvas { filter: none !important; }

/* the wordmark turns into a bloody "I warned you" */
.xan-warned {
    position: relative;
    display: inline-block;
    color: #c20000;
    font-weight: 720;
    letter-spacing: -0.02em;
    text-shadow:
        0 0 4px #ff1a1a,
        0 0 18px #8b0000,
        0 0 40px #4a0000,
        2px 2px 0 #2a0000;
    animation: xan-warned-in 0.6s ease;
}
@keyframes xan-warned-in {
    0% { opacity: 0; transform: scale(0.9) skewX(-4deg); }
    100% { opacity: 1; transform: scale(1) skewX(0); }
}
/* blood droplets that ooze down off the text */
.xan-blood {
    position: absolute;
    top: 92%;
    width: 5px;
    border-radius: 0 0 50% 50% / 0 0 60% 60%;
    background: linear-gradient(to bottom, #c20000, #6a0000);
    box-shadow: 0 0 6px rgba(200,0,0,0.6);
    transform-origin: top center;
    animation: xan-drip-down 3.4s ease-in infinite;
}
.xan-blood:nth-child(1) { left: 12%; height: 26px; animation-delay: 0.1s; }
.xan-blood:nth-child(2) { left: 33%; height: 40px; animation-delay: 0.9s; }
.xan-blood:nth-child(3) { left: 52%; height: 30px; animation-delay: 0.4s; }
.xan-blood:nth-child(4) { left: 71%; height: 48px; animation-delay: 1.4s; }
.xan-blood:nth-child(5) { left: 88%; height: 22px; animation-delay: 0.7s; }
@keyframes xan-drip-down {
    0%   { transform: scaleY(0); opacity: 0; }
    15%  { transform: scaleY(0.4); opacity: 1; }
    70%  { transform: scaleY(1); opacity: 1; }
    100% { transform: scaleY(1.25) translateY(60px); opacity: 0; }
}
#splash.evil-xan-theme #splash-tip {
    color: #ff4444;
    text-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000;
    opacity: 1;
}
.xan-warning {
    color: #ff4444 !important;
    animation: spooky-glow 2s infinite ease-in-out !important;
}
@keyframes spooky-glow {
    0%, 100% { text-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000, 0 0 35px #ff0000; opacity: 0.7; }
    50% { text-shadow: 0 0 25px #ff0000, 0 0 40px #ff0000, 0 0 55px #ff0000; opacity: 1; }
}

/* DVD bouncer logo */
.dvd-logo {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* za warudo — the time-stop "bubble". an expanding spherical shockwave that
   sweeps across the screen the instant DIO stops time (and contracts back as
   time resumes). a bright rim with a glassy refractive interior, like the
   anime's dome of stopped time. */
.zw-bubble {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 2200px;
    height: 2200px;
    margin: -1100px 0 0 -1100px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 999998;
    border: 4px solid rgba(245, 226, 150, 0.9);
    box-shadow:
        0 0 60px rgba(245, 226, 150, 0.55),
        inset 0 0 120px rgba(245, 226, 150, 0.25),
        inset 0 0 40px rgba(255, 255, 255, 0.35);
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(245, 226, 150, 0.04) 55%,
        rgba(245, 226, 150, 0.14) 82%,
        rgba(245, 226, 150, 0) 100%);
    transform: scale(0);
    animation: zw-bubble-out 1.5s cubic-bezier(0.16, 0.84, 0.3, 1) forwards;
}
/* on resume the dome collapses back inward */
.zw-bubble-reverse {
    transform: scale(1.4);
    animation: zw-bubble-in 1.5s cubic-bezier(0.7, 0, 0.84, 0.4) forwards;
}
@keyframes zw-bubble-out {
    0% { transform: scale(0); opacity: 1; }
    70% { opacity: 0.9; }
    100% { transform: scale(1.4); opacity: 0; }
}
@keyframes zw-bubble-in {
    0% { transform: scale(1.4); opacity: 0; }
    25% { opacity: 0.9; }
    100% { transform: scale(0); opacity: 1; }
}
/* the ticking golden clock that replaces the tip */
.zw-clock {
    cursor: pointer;
    filter: drop-shadow(0 0 6px rgba(245, 207, 82, 0.7));
    transition: filter 0.2s ease, transform 0.2s ease;
}
.zw-clock:hover {
    filter: drop-shadow(0 0 12px rgba(245, 207, 82, 0.95));
    transform: scale(1.08);
}

/* dark souls death screen */
#death-screen-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99990;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.45s ease-in-out;
}
#death-screen-overlay img {
    width: 80%;
    max-width: 600px;
    height: auto;
    opacity: 0;
    transition: opacity 1.4s ease-in-out;
}
/* the YOU DIED art only fades in once the user clicks the black void */
#death-screen-overlay.show-died img { opacity: 1; }

/* 3am devil hour */
#devil-hour-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#devil-hour-overlay img { width: 100%; height: 100%; object-fit: cover; }

/* kira bomb props */
#kira-bomb, #killer-queen-img { image-rendering: auto; }

/* pufa — shown like a glinting piece of treasure pulled from a chest */
.pufa-treasure {
    position: relative;
    display: inline-block;
    margin: 12px 0;
    border-radius: 10px;
    overflow: visible;
    isolation: isolate;
    animation: pufa-bob 3.2s ease-in-out infinite;
}
.pufa-treasure .pufa-image {
    display: block;
    max-width: 160px;
    max-height: 110px;
    border-radius: 10px;
    /* warm gold tint + a radiant glow as if catching torchlight */
    filter: sepia(0.55) saturate(2.2) hue-rotate(2deg) brightness(1.12)
            drop-shadow(0 0 10px rgba(255, 200, 60, 0.8))
            drop-shadow(0 0 26px rgba(255, 170, 20, 0.55));
    border: 1px solid rgba(255, 224, 140, 0.6);
    animation: pufa-glow 2.4s ease-in-out infinite;
}
/* a diagonal highlight that sweeps across like light off polished gold */
.pufa-treasure .pufa-shine {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 30%,
        rgba(255, 248, 210, 0.85) 47%,
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 248, 210, 0.85) 53%,
        transparent 70%);
    background-size: 280% 100%;
    background-position: 200% 0;
    mix-blend-mode: screen;
    animation: pufa-sweep 2.8s ease-in-out infinite;
}
.pufa-treasure .pufa-spark {
    position: absolute;
    color: #fff6c8;
    text-shadow: 0 0 6px #ffd24d, 0 0 12px #ffae1a;
    font-size: 0.9rem;
    opacity: 0;
    pointer-events: none;
    animation: pufa-twinkle 2.6s ease-in-out infinite;
}
.pufa-spark1 { top: -8px; left: 10%; animation-delay: 0.2s; }
.pufa-spark2 { top: 30%; right: -10px; animation-delay: 1.1s; font-size: 1.1rem; }
.pufa-spark3 { bottom: -6px; left: 60%; animation-delay: 1.8s; }
@keyframes pufa-glow {
    0%, 100% { filter: sepia(0.55) saturate(2.2) hue-rotate(2deg) brightness(1.1) drop-shadow(0 0 10px rgba(255,200,60,0.75)) drop-shadow(0 0 24px rgba(255,170,20,0.5)); }
    50% { filter: sepia(0.55) saturate(2.4) hue-rotate(2deg) brightness(1.22) drop-shadow(0 0 16px rgba(255,215,90,0.95)) drop-shadow(0 0 36px rgba(255,180,30,0.7)); }
}
@keyframes pufa-sweep {
    0% { background-position: 200% 0; }
    55%, 100% { background-position: -120% 0; }
}
@keyframes pufa-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(45deg); }
}
@keyframes pufa-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}