/* ---------- RESET & MOBILE-FIRST ---------- */
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { 
    height:100%; 
    overflow-x: hidden; 
    font-family: 'Cinzel Decorative', cursive; 
}

/* ---------- BACKGROUND & FILTER ---------- */
body {
    background:#0a0000;
    background-image:
        radial-gradient(circle at 30% 70%, #330000 0%, transparent 50%),
        radial-gradient(circle at 70% 30%, #440000 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, #220000 0%, transparent 60%);
    filter: brightness(0.85) contrast(1.2);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    position:relative;
    min-height:100vh;
    padding: 2rem 1rem;
}

/* ---------- MIST ---------- */
.mist {
    position:absolute;
    inset:0;
    width:300%;
    background:linear-gradient(90deg, transparent, rgba(150,0,0,.07), transparent);
    animation:drift 32s linear infinite;
    pointer-events:none;
    z-index:0;
}
@keyframes drift {
    0%   { transform:translateX(-66%); }
    100% { transform:translateX(0%); }
}

/* ---------- EMBERS ---------- */
.embers {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100vh;
    pointer-events:none;
    z-index:1;
}
.ember {
    position:absolute;
    width:3.5px;
    height:3.5px;
    background:#ff3300;
    border-radius:50%;
    box-shadow:0 0 7px #ff5500, 0 0 14px #ff2200;
    opacity:0;
    bottom:0;
}

/* ---------- RESPONSIVE CONTAINER ---------- */
.container {
    display:flex;
    flex-wrap:wrap;
    gap: clamp(1rem, 4vw, 3rem);
    justify-content:center;
    align-items:flex-start;
    width:100%;
    max-width: 1400px;
    z-index:2;
    position:relative;
    margin-top: auto;
    margin-bottom: auto;
}

/* ---------- GUARDIAN CARD ---------- */
.guardian {
    position:relative;
    text-align:center;
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 0;
    margin: 0 auto;
    padding: 0.5rem;
}
.guardian img {
    width:100%;
    height:auto;
    display:block;
    max-height: 60vh;
    object-fit: contain;
    filter: brightness(1.3);
    transition: all .5s cubic-bezier(.25,.8,.25,1);
    cursor:pointer;
    position:relative;
    z-index:2;
}

/* SUBTLE GLOW ON HOVER (behind image, no text overlap) */
.guardian .glow {
    position:absolute;
    inset:0;
    background: radial-gradient(circle at center, rgba(255, 50, 0, 0.2) 0%, transparent 65%);
    border-radius:8px;
    opacity:0;
    transition: opacity .5s ease;
    pointer-events:none;
    z-index:1;
}
.guardian:hover .glow {
    opacity:1;
}
.guardian:hover img {
    transform: scale(1.12) translateY(-6px);
    filter: brightness(1.6) drop-shadow(0 0 10px rgba(255, 50, 0, 0.5));
}

/* WHITE, GLOWING, FULLY VISIBLE NAMES */
.guardian figcaption {
    margin-top: 1rem;
    font-size: clamp(1.3rem, 4vw, 2rem);
    font-weight:700;
    color: #ffffff;
    text-shadow:
        0 0 6px #800000,
        0 0 12px #ff0000,
        0 2px 3px #000;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    word-wrap: break-word;
    hyphens: auto;
    position:relative;
    z-index:3;
    padding: 0 0.5rem;
    line-height: 1.2;
}

/* ---------- MOBILE & TABLET ---------- */
@media (max-width: 768px) {
    body { padding: 1.5rem 0.75rem; }
    .guardian { flex: 1 1 45%; }
}
@media (max-width: 480px) {
    .guardian { 
        flex: 1 1 100%; 
        max-width: 280px;
    }
    .guardian figcaption {
        font-size: 1.6rem;
        margin-top: 0.8rem;
    }
}