body {
    background-color: #050505;
    margin: 0;
    padding: 60px 20px;

    display: flex;
    justify-content: center;

    font-family: "Montserrat", sans-serif;
    color: #e8e8e8;
}

/* =========================
   MAIN CARD
========================= */
.container {
    width: 100%;
    max-width: 900px;
    padding: 60px;

    position: relative;

    background: linear-gradient(180deg, #141414, #0b0b0b);

    /* Transparent border so the gradient shows through */
    border: 2px solid transparent;

    /* Gold gradient border */
    border-image: linear-gradient(
        135deg,
        #fff7c2,
        #ffd84d,
        #d4af37,
        #ffea94,
        #fff7c2
    ) 1;

    box-shadow:
        0 0 100px rgba(0, 0, 0, 0.9),
        inset 0 0 40px rgba(0, 0, 0, 0.7);

    overflow: hidden;
}

/* subtle noise overlay */
.container::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    pointer-events: none;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.container > * {
    position: relative;
    z-index: 2;
}

/* =========================
   TEXT SHADOW (OUTLINE EFFECT)
========================= */
p, h1, h2, h3, h4, li, a, span {
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.95),
        1px 0 2px rgba(0, 0, 0, 0.6),
        -1px 0 2px rgba(0, 0, 0, 0.6),
        0 -1px 2px rgba(0, 0, 0, 0.6);
}

/* =========================
   LOGO
========================= */
.logo {
    display: block;
    margin: 10px auto 30px auto;

    width: 320px;
    max-width: 80%;
    height: auto;

    transition: transform 0.25s ease, filter 0.25s ease;
}

.logo:hover {
    transform: scale(1.03);
    filter: brightness(1.1);
}

/* =========================
   IMAGES (BASE FIX)
========================= */
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 20px auto;

    /* IMPORTANT: prevents weird transparency artifacts */
    background: transparent;
    transform-origin: center;
}

/* =========================
   ENEMY / GIF RENDER (ZOOM EFFECT)
========================= */
.enemy-render {
    width: 320px;   /* slightly larger */
    max-width: 85%;
    height: auto;

    margin: 30px auto;

    transition: transform 0.25s ease, filter 0.25s ease;
    will-change: transform;
}

.enemy-render:hover {
    transform: scale(1.08);
    filter: brightness(1.05);
}

/* optional bigger variant */
.enemy-render.big {
    width: 420px;
    max-width: 95%;
}

/* =========================
   HEADINGS
========================= */
h2 {
    text-align: center;
    font-size: 1.8rem;
    margin: 35px 0 20px 0;
}

h3 {
    margin-top: 40px;
    font-size: 1.3rem;
}

h4 {
    margin-top: 20px;
}

/* =========================
   LINKS
========================= */
a {
    color: #6fb6ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* =========================
   RAINBOW (SMOOTH + NEON GLOW)
========================= */
.rainbow {
    display: inline-block;

    background: linear-gradient(
        90deg,
        #ff3b3b,
        #ff9a1f,
        #fff04a,
        #3dff6b,
        #2fd8ff,
        #7a5cff,
        #ff3df2,
        #ff3b3b
    );

    background-size: 400% 100%;
    background-position: 0% 50%;

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    animation: rainbowShift 8s linear infinite;

    /* brightness + saturation boost */
    filter: brightness(1.35) saturate(1.8);

    /* base glow */
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.25),
        0 0 12px rgba(255, 0, 255, 0.25),
        0 0 18px rgba(0, 255, 255, 0.2);
}

/* smooth infinite movement */
@keyframes rainbowShift {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 400% 50%;
    }
}
/* =========================
   GLOW
========================= */
.glow {
    color: #d4af37;
    text-shadow: 0 0 10px rgba(212,175,55,0.6);
}

/* =========================
   SYSTEM
========================= */
.system {
    color: #888;
    font-family: monospace;
}

/* =========================
   GLITCH
========================= */
.glitch {
    color: #ff4d4d;
    text-shadow: 2px 0 red, -2px 0 cyan;
}

/* =========================
   SPOILER
========================= */
.spoiler {
    background: #111;
    color: #111;
    padding: 2px 4px;
}

.spoiler:hover {
    color: #e8e8e8;
}

/* =========================
   HOVER LORE
========================= */
.plore {
    position: relative;
    border-bottom: 1px dotted #666;
    cursor: help;
}

.plore::after {
    content: attr(data-text);
    position: absolute;
    left: 50%;
    bottom: 125%;
    transform: translateX(-50%);

    background: #0b0b0b;
    border: 1px solid #2a2a2a;
    padding: 8px 12px;

    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    z-index: 10;
}

.plore:hover::after {
    opacity: 1;
}

/* =========================
   TYPEWRITER
========================= */
.typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #666;
}