/* Styles for the Persona Chat Widget */
#chat-window {
    height: 300px;
    overflow-y: auto;
    background-color: #f4e4bc;
    color: #3e2723;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1em;
    line-height: 1.5;
    border: 4px double #5d4037;
    border-radius: 0.25rem;
    padding: 15px;
    box-shadow: inset 0 0 20px rgba(93, 64, 55, 0.2);
}

#chat-window div {
    margin-bottom: 0.8rem;
    border-bottom: 1px dashed #a1887f;
    padding-bottom: 0.5rem;
}

#chat-window strong {
    color: #5d4037;
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 1px;
}

/* Scrollbar styling */
#chat-window::-webkit-scrollbar {
    width: 8px;
}
#chat-window::-webkit-scrollbar-track {
    background: #e0c9a6;
}
#chat-window::-webkit-scrollbar-thumb {
    background: #8d6e63;
    border: 1px solid #5d4037;
}

/* Mute Toggle Button */
#mute-toggle {
    background-color: transparent;
    border: 1px solid #5d4037;
    border-radius: 4px;
    color: #5d4037;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 8px;
    padding: 0 6px;
    vertical-align: middle;
}

#mute-toggle:hover {
    background-color: #5d4037;
    color: #f4e4bc;
}

/* Dice Trigger Button */
#dice-trigger {
    background-color: transparent;
    border: 1px solid #5d4037;
    border-radius: 4px;
    color: #5d4037;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 4px;
    margin-right: 4px;
    padding: 0 6px;
    vertical-align: middle;
}

#dice-trigger:hover {
    background-color: #5d4037;
    color: #f4e4bc;
}

/* Visual style for sentient items like Grarg */
.sentient-item {
    border: 2px solid #8b0000 !important; /* Dark red border */
    box-shadow: 0 0 15px #8b0000 inset;   /* Inner glow */
    background-color: #1a0505 !important; /* Dark background */
    color: #f5f5f5 !important;            /* Light text for dark background */
    text-shadow: 0 0 5px #ff4444;         /* Subtle red text glow */
    position: relative;
    animation: sentientPulse 3s infinite ease-in-out;
}

.sentient-item strong {
    color: #ff6666 !important;
}

/* Optional: Add a label to indicate telepathy */
.sentient-item::before {
    content: "🧠 TELEPATHIC LINK ESTABLISHED";
    display: block;
    font-size: 0.7em;
    color: #ff4444;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

/* Visual style for robotic/modron personas */
.robotic {
    border: 2px solid #00ffcc !important; /* Cyan/Teal border */
    box-shadow: 0 0 15px #00ffcc inset;   /* Inner glow */
    background-color: #001a1a !important; /* Dark teal background */
    font-family: 'Courier New', Courier, monospace !important;
    color: #e0f7fa !important;
    position: relative;
    animation: roboticPulse 2s infinite ease-in-out;
}

.robotic::before {
    content: "⚙️ SYSTEM ONLINE";
    display: block;
    font-size: 0.7em;
    color: #00ffcc;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes roboticPulse {
    0% {
        box-shadow: 0 0 15px #00ffcc inset;
    }
    50% {
        box-shadow: 0 0 25px #00ffcc inset, 0 0 5px #00ffcc;
    }
    100% {
        box-shadow: 0 0 15px #00ffcc inset;
    }
}

@keyframes sentientPulse {
    0% {
        box-shadow: 0 0 15px #8b0000 inset;
    }
    50% {
        box-shadow: 0 0 30px #8b0000 inset, 0 0 10px #8b0000;
    }
    100% {
        box-shadow: 0 0 15px #8b0000 inset;
    }
}

/* Visual style for ghost/spirit personas */
.ghostly {
    border: 2px solid #88c0d0 !important; /* Pale blue border */
    box-shadow: 0 0 15px #88c0d0 inset;   /* Inner glow */
    background-color: #e5f4f9 !important; /* Very light blue background */
    color: #2e3440 !important;            /* Dark text for contrast */
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
    font-style: italic;
    position: relative;
    animation: ghostlyPulse 4s infinite ease-in-out;
}

.ghostly strong {
    color: #5e81ac !important; /* Muted blue for names */
}

.ghostly::before {
    content: "👻 SPECTRAL MANIFESTATION";
    display: block;
    font-size: 0.7em;
    color: #5e81ac;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes ghostlyPulse {
    0% { box-shadow: 0 0 15px #88c0d0 inset; }
    50% { box-shadow: 0 0 25px #88c0d0 inset, 0 0 5px #88c0d0; }
    100% { box-shadow: 0 0 15px #88c0d0 inset; }
}

/* Visual style for divine/god personas */
.divine {
    border: 2px solid #ffd700 !important; /* Gold border */
    box-shadow: 0 0 15px #ffd700 inset;   /* Inner glow */
    background-color: #fffaf0 !important; /* FloralWhite background */
    color: #4b3621 !important;            /* Dark brown text */
    font-family: 'Cinzel', 'Trajan Pro', serif !important; /* Majestic font */
    position: relative;
    animation: divinePulse 4s infinite ease-in-out;
}

.divine strong {
    color: #b8860b !important; /* Dark Goldenrod for names */
}

.divine::before {
    content: "✨ DIVINE PRESENCE";
    display: block;
    font-size: 0.7em;
    color: #b8860b;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes divinePulse {
    0% { box-shadow: 0 0 15px #ffd700 inset; }
    50% { box-shadow: 0 0 25px #ffd700 inset, 0 0 10px #ffd700; }
    100% { box-shadow: 0 0 15px #ffd700 inset; }
}

/* Visual style for fiery personas like Surtur */
.fiery {
    border: 2px solid #ff4500 !important; /* OrangeRed border */
    box-shadow: 0 0 15px #ff4500 inset;   /* Inner glow */
    background-color: #2c1608 !important; /* Dark, fiery background */
    color: #fff5e1 !important;            /* Off-white text */
    text-shadow: 0 0 7px #ff8c00;         /* Orange text glow */
    position: relative;
    animation: fieryPulse 1.5s infinite ease-in-out;
}

.fiery strong {
    color: #ff7f50 !important; /* Coral for names */
}

.fiery::before {
    content: "🔥 IMMOLATION IMMINENT";
    display: block;
    font-size: 0.7em;
    color: #ff6347; /* Tomato red */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes fieryPulse {
    0% {
        box-shadow: 0 0 15px #ff4500 inset, 0 0 5px #ff4500;
    }
    50% {
        box-shadow: 0 0 25px #ff8c00 inset, 0 0 10px #ff8c00;
    }
    100% {
        box-shadow: 0 0 15px #ff4500 inset, 0 0 5px #ff4500;
    }
}

/* Visual style for infernal/hellish personas */
.infernal {
    border: 2px solid #800000 !important; /* Maroon border */
    box-shadow: 0 0 15px #800000 inset;   /* Inner glow */
    background-color: #0f0505 !important; /* Very dark red/black background */
    color: #ffe6e6 !important;            /* Lighter pale red text */
    font-family: 'Verdana', 'Geneva', sans-serif !important; /* More readable font */
    letter-spacing: normal;
    position: relative;
    animation: infernalPulse 3s infinite ease-in-out;
}

.infernal strong {
    color: #ff0000 !important; /* Bright red for names */
}

.infernal::before {
    content: "🔥 PACT SEALED IN BLOOD";
    display: block;
    font-size: 0.7em;
    color: #cc0000;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes infernalPulse {
    0% { box-shadow: 0 0 15px #800000 inset; }
    50% { box-shadow: 0 0 30px #ff0000 inset, 0 0 10px #800000; }
    100% { box-shadow: 0 0 15px #800000 inset; }
}

/* Visual style for nature/druidic personas */
.nature {
    border: 2px solid #228b22 !important; /* Forest Green border */
    box-shadow: 0 0 15px #228b22 inset;   /* Inner glow */
    background-color: #f0fff0 !important; /* Honeydew background */
    color: #006400 !important;            /* Dark Green text */
    font-family: 'Georgia', serif !important;
    position: relative;
    animation: naturePulse 4s infinite ease-in-out;
}

.nature strong {
    color: #2e8b57 !important; /* SeaGreen for names */
}

.nature::before {
    content: "🌿 NATURE'S VOICE";
    display: block;
    font-size: 0.7em;
    color: #228b22;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes naturePulse {
    0% { box-shadow: 0 0 15px #228b22 inset; }
    50% { box-shadow: 0 0 25px #32cd32 inset, 0 0 5px #228b22; }
    100% { box-shadow: 0 0 15px #228b22 inset; }
}

/* Visual style for vampiric personas */
.vampiric {
    border: 2px solid #8b0000 !important; /* Blood red border */
    box-shadow: 0 0 15px #8b0000 inset;   /* Inner glow */
    background-color: #0a0000 !important; /* Pitch black background */
    color: #e0e0e0 !important;            /* Pale text */
    font-family: 'Times New Roman', serif !important;
    position: relative;
    /* SVG background image of a blood drop */
    background-image: url('data:image/svg+xml;utf8,<svg width="30" height="40" viewBox="0 0 30 40" xmlns="http://www.w3.org/2000/svg"><path d="M15 40 Q5 20 15 0 Q25 20 15 40 Z" fill="%238b0000" opacity="0.2"/></svg>');
    background-repeat: repeat;
    animation: bloodRain 2s linear infinite;
}

.vampiric strong {
    color: #ff3333 !important; /* Bright red for names */
}

.vampiric::before {
    content: "🩸 BLOOD THIRST DETECTED";
    display: block;
    font-size: 0.7em;
    color: #ff3333;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes bloodRain {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; } /* Moves down by height of SVG */
}

/* Visual style for necrotic/lich personas */
.necrotic {
    border: 2px solid #50c878 !important; /* Acid Green border */
    box-shadow: 0 0 15px #50c878 inset;   /* Inner glow */
    background-color: #0a1a0a !important; /* Very dark green background */
    color: #d0f0c0 !important;            /* Tea Green text */
    font-family: 'Consolas', 'Monaco', monospace !important;
    position: relative;
    animation: necroticPulse 3s infinite ease-in-out;
}

.necrotic strong {
    color: #7fff00 !important; /* Chartreuse for names */
}

.necrotic::before {
    content: "☠️ NECROTIC ENERGY MANIFESTING";
    display: block;
    font-size: 0.7em;
    color: #50c878;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes necroticPulse {
    0% { box-shadow: 0 0 15px #50c878 inset; }
    50% { box-shadow: 0 0 25px #32cd32 inset, 0 0 5px #50c878; }
    100% { box-shadow: 0 0 15px #50c878 inset; }
}

/* Visual style for icy personas like Thyrm */
.icy {
    border: 2px solid #afeeee !important; /* PaleTurquoise border */
    box-shadow: 0 0 15px #afeeee inset;   /* Inner glow */
    background-color: #0f1f2f !important; /* Dark icy blue background */
    color: #e0ffff !important;            /* LightCyan text */
    font-family: 'Verdana', sans-serif !important;
    text-shadow: 0 0 5px #00ced1;         /* DarkTurquoise glow */
    position: relative;
    animation: icyPulse 3s infinite ease-in-out;
}

.icy strong {
    color: #00bfff !important; /* DeepSkyBlue for names */
}

.icy::before {
    content: "❄️ FIMBULWINTER APPROACHING";
    display: block;
    font-size: 0.7em;
    color: #afeeee;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes icyPulse {
    0% { box-shadow: 0 0 15px #afeeee inset; }
    50% { box-shadow: 0 0 25px #00ced1 inset, 0 0 10px #afeeee; }
    100% { box-shadow: 0 0 15px #afeeee inset; }
}

/* Visual style for chaotic/slaad personas */
.chaotic {
    border: 3px solid #ff00ff !important;
    box-shadow: 0 0 15px #ff00ff inset;
    background-color: #1a051a !important;
    color: #ffffff !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: relative;
    animation: chaoticFlux 4s infinite alternate;
}

.chaotic strong {
    color: #ff80ff !important;
    text-shadow: 1px 1px 0 #000000;
}

.chaotic::before {
    content: "🌀 ENTROPY RISING";
    display: block;
    font-size: 0.7em;
    color: #ff00ff;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes chaoticFlux {
    0% { border-color: #ff00ff; box-shadow: 0 0 15px #ff00ff inset; border-radius: 0; }
    25% { border-color: #00ff00; box-shadow: 0 0 20px #00ff00 inset; border-radius: 15px 0 15px 0; }
    50% { border-color: #ffff00; box-shadow: 0 0 15px #ffff00 inset; border-radius: 0 15px 0 15px; }
    75% { border-color: #00ffff; box-shadow: 0 0 20px #00ffff inset; border-radius: 5px; }
    100% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000 inset; border-radius: 0; }
}

/* Visual style for crystalline/dromite personas */
.crystalline {
    border: 2px solid #7fffd4 !important; /* Aquamarine border */
    box-shadow: 0 0 15px #7fffd4 inset;   /* Inner glow */
    background-color: #f0ffff !important; /* Azure background */
    color: #2f4f4f !important;            /* DarkSlateGray text */
    font-family: 'Lucida Console', monospace !important;
    position: relative;
    /* Faceted background pattern */
    background-image: 
        linear-gradient(45deg, #e0ffff 25%, transparent 25%, transparent 75%, #e0ffff 75%, #e0ffff),
        linear-gradient(45deg, #e0ffff 25%, transparent 25%, transparent 75%, #e0ffff 75%, #e0ffff);
    background-position: 0 0, 10px 10px;
    background-size: 20px 20px;
    animation: crystallinePulse 3s infinite ease-in-out;
}

.crystalline strong {
    color: #008b8b !important; /* DarkCyan for names */
}

.crystalline::before {
    content: "💎 CRYSTALLINE RESONANCE";
    display: block;
    font-size: 0.7em;
    color: #008b8b;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes crystallinePulse {
    0% { box-shadow: 0 0 15px #7fffd4 inset; border-color: #7fffd4; }
    50% { box-shadow: 0 0 25px #40e0d0 inset, 0 0 5px #7fffd4; border-color: #40e0d0; }
    100% { box-shadow: 0 0 15px #7fffd4 inset; border-color: #7fffd4; }
}

/* Visual style for psionic personas */
.psionic {
    border: 2px solid #9370db !important; /* MediumPurple border */
    box-shadow: 0 0 15px #9370db inset;   /* Inner glow */
    background-color: #1a051a !important; /* Dark purple background */
    color: #e6e6fa !important;            /* Lavender text */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: relative;
    animation: psionicPulse 3s infinite ease-in-out;
}

.psionic strong {
    color: #da70d6 !important; /* Orchid for names */
}

.psionic::before {
    content: "🧠 PSIONIC LINK ACTIVE";
    display: block;
    font-size: 0.7em;
    color: #da70d6;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes psionicPulse {
    0% { box-shadow: 0 0 15px #9370db inset; }
    50% { box-shadow: 0 0 30px #8a2be2 inset, 0 0 10px #9370db; }
    100% { box-shadow: 0 0 15px #9370db inset; }
}

/* Visual style for toxic/blighter personas */
.toxic {
    border: 3px solid #32cd32 !important; /* LimeGreen border */
    box-shadow: 0 0 15px #32cd32 inset;   /* Inner glow */
    background-color: #0f1a0f !important; /* Dark green background */
    color: #98fb98 !important;            /* PaleGreen text */
    font-family: 'Courier New', monospace !important;
    position: relative;
    animation: toxicPulse 4s infinite ease-in-out;
}

.toxic strong {
    color: #7fff00 !important; /* Chartreuse for names */
}

.toxic::before {
    content: "☣️ TOXICITY DETECTED";
    display: block;
    font-size: 0.7em;
    color: #32cd32;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes toxicPulse {
    0% { box-shadow: 0 0 15px #32cd32 inset; border-color: #32cd32; }
    50% { box-shadow: 0 0 25px #adff2f inset, 0 0 8px #32cd32; border-color: #adff2f; } /* GreenYellow pulse */
    100% { box-shadow: 0 0 15px #32cd32 inset; border-color: #32cd32; }
}

/* Visual style for shadowy/deceptive personas */
.shadowy {
    border: 2px solid #483d8b !important; /* DarkSlateBlue border */
    box-shadow: 0 0 15px #483d8b inset;   /* Inner glow */
    background-color: #1a1a1a !important; /* Very dark background */
    color: #d3d3d3 !important;            /* LightGray text */
    font-family: 'Garamond', 'Times New Roman', serif !important;
    font-style: italic;
    position: relative;
    overflow: hidden; /* To contain the animated smoke */
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(50, 50, 70, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(40, 40, 60, 0.7) 0%, transparent 50%);
    animation: smokyBackground 10s infinite alternate ease-in-out;
}

.shadowy strong {
    color: #9370db !important; /* MediumPurple for names */
}

.shadowy::before {
    content: "☁️ VEIL OF SHADOWS";
    display: block;
    font-size: 0.7em;
    color: #9370db;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
    text-shadow: 0 0 5px #000;
}

@keyframes smokyBackground {
    0% {
        background-position: 0% 0%, 100% 100%;
        box-shadow: 0 0 15px #483d8b inset;
    }
    100% {
        background-position: 100% 100%, 0% 0%;
        box-shadow: 0 0 25px #30285b inset;
    }
}

/* Visual style for bloody/war-torn personas */
.bloody {
    border: 3px solid #dc143c !important; /* Crimson border */
    box-shadow: 0 0 15px #8b0000 inset;   /* Dark red inner glow */
    background-color: #2b0000 !important; /* Dark blood background */
    color: #fff0f0 !important;            /* Very pale red/white text */
    font-family: 'Verdana', sans-serif !important;
    position: relative;
    /* Dripping effect simulation */
    background-image: linear-gradient(180deg, rgba(220, 20, 60, 0.1) 0%, rgba(139, 0, 0, 0.3) 50%, rgba(220, 20, 60, 0.1) 100%);
    background-size: 100% 200%;
    animation: bloodyDrip 6s linear infinite;
}

.bloody strong {
    color: #ff6666 !important; /* Lighter red for names */
}

.bloody::before {
    content: "🩸 BLOOD FOR THE TIDE";
    display: block;
    font-size: 0.7em;
    color: #dc143c;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes bloodyDrip {
    0% { background-position: 0% 0%; box-shadow: 0 0 15px #8b0000 inset; }
    50% { box-shadow: 0 0 25px #dc143c inset, 0 0 5px #8b0000; }
    100% { background-position: 0% 200%; box-shadow: 0 0 15px #8b0000 inset; }
}

/* Visual style for good sentient items */
.sentient-item-good {
    border: 2px solid #87ceeb !important; /* SkyBlue border */
    box-shadow: 0 0 15px #87ceeb inset;   /* Inner glow */
    background-color: #f0f8ff !important; /* AliceBlue background */
    color: #000080 !important;            /* Navy text */
    text-shadow: 0 0 3px #add8e6;         /* Light blue text glow */
    position: relative;
    animation: sentientPulseGood 3s infinite ease-in-out;
}

.sentient-item-good strong {
    color: #4682b4 !important; /* SteelBlue */
}

.sentient-item-good::before {
    content: "✨ EMPATHIC RESONANCE ESTABLISHED";
    display: block;
    font-size: 0.7em;
    color: #4682b4;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes sentientPulseGood {
    0% { box-shadow: 0 0 15px #87ceeb inset; }
    50% { box-shadow: 0 0 30px #add8e6 inset, 0 0 10px #87ceeb; }
    100% { box-shadow: 0 0 15px #87ceeb inset; }
}

/* Visual style for astral/space personalities */
.astral {
    border: 2px solid #4b0082 !important; /* Indigo border */
    box-shadow: 0 0 15px #4b0082 inset;   /* Inner glow */
    background-color: #00001a !important; /* Very dark blue background */
    color: #e6e6fa !important;            /* Lavender text */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: relative;
    /* Starry background simulation */
    background-image: 
        radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 3px),
        radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 2px),
        radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 3px);
    background-size: 550px 550px, 350px 350px, 250px 250px;
    background-position: 0 0, 40px 60px, 130px 270px;
    animation: astralDrift 60s linear infinite;
}

.astral strong {
    color: #9370db !important; /* MediumPurple for names */
}

.astral::before {
    content: "✨ ASTRAL PROJECTION";
    display: block;
    font-size: 0.7em;
    color: #9370db;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes astralDrift {
    from { background-position: 0 0, 40px 60px, 130px 270px; }
    to { background-position: 550px 550px, 390px 410px, 680px 820px; }
}

/* Visual style for oceanic/sea personalities */
.oceanic {
    border: 2px solid #20b2aa !important; /* LightSeaGreen border */
    box-shadow: 0 0 15px #20b2aa inset;   /* Inner glow */
    background-color: #001f3f !important; /* Navy background */
    color: #e0ffff !important;            /* LightCyan text */
    font-family: 'Verdana', sans-serif !important;
    position: relative;
    animation: oceanicPulse 4s infinite ease-in-out;
}

.oceanic strong {
    color: #48d1cc !important; /* MediumTurquoise for names */
}

.oceanic::before {
    content: "🌊 OCEANIC DEPTHS";
    display: block;
    font-size: 0.7em;
    color: #48d1cc;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.8;
}

@keyframes oceanicPulse {
    0% { box-shadow: 0 0 15px #20b2aa inset; }
    50% { box-shadow: 0 0 25px #00ced1 inset, 0 0 5px #20b2aa; }
    100% { box-shadow: 0 0 15px #20b2aa inset; }
}

/* Visual style for draconic personas */
.draconic {
    border: 3px solid #daa520 !important; /* Goldenrod border */
    box-shadow: 0 0 15px #daa520 inset;   /* Inner glow */
    background-color: #1a0f00 !important; /* Very dark brown/gold background */
    color: #f0e68c !important;            /* Khaki text */
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif !important;
    position: relative;
    /* Scale pattern simulation */
    background-image: 
        radial-gradient(circle at 0% 50%, rgba(218, 165, 32, 0.1) 9px, transparent 10px),
        radial-gradient(circle at 100% 50%, rgba(218, 165, 32, 0.1) 9px, transparent 10px);
    background-size: 20px 20px;
    animation: draconicPulse 4s infinite ease-in-out;
}

.draconic strong {
    color: #ffd700 !important; /* Gold for names */
    text-shadow: 1px 1px 2px #000;
}

.draconic::before {
    content: "🐉 DRACONIC MAJESTY";
    display: block;
    font-size: 0.7em;
    color: #daa520;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes draconicPulse {
    0% { box-shadow: 0 0 15px #daa520 inset; border-color: #daa520; }
    50% { box-shadow: 0 0 30px #ffd700 inset, 0 0 10px #daa520; border-color: #ffd700; }
    100% { box-shadow: 0 0 15px #daa520 inset; border-color: #daa520; }
}

/* Visual style for techno-organic personas like Asoun */
.techno-organic {
    border: 3px solid #32cd32 !important; /* Lime Green */
    box-shadow: 0 0 15px #9400d3 inset;   /* DarkViolet glow */
    background-color: #0a1a0a !important; /* Dark green-black */
    color: #00ff00 !important;            /* Lime text */
    font-family: 'Courier New', Courier, monospace !important;
    position: relative;
    /* Circuit-like pattern */
    background-image: 
        linear-gradient(90deg, rgba(0, 255, 0, 0.05) 1px, transparent 1px),
        linear-gradient(rgba(0, 255, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: technoPulse 3s infinite alternate;
}

.techno-organic strong {
    color: #adff2f !important; /* GreenYellow */
    text-shadow: 0 0 2px #00ff00;
}

.techno-organic::before {
    content: "🧬 TECHNO-ORGANIC FUSION";
    display: block;
    font-size: 0.7em;
    color: #32cd32;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes technoPulse {
    0% { border-color: #32cd32; box-shadow: 0 0 15px #9400d3 inset; }
    100% { border-color: #9400d3; box-shadow: 0 0 25px #32cd32 inset; }
}

/* Visual style for forge/smith personas like Taurlundrex */
.forge {
    border: 3px solid #8b4513 !important; /* SaddleBrown border */
    box-shadow: 0 0 15px #ff4500 inset;   /* OrangeRed glow */
    background-color: #261e1b !important; /* Dark earthy background */
    color: #f5deb3 !important;            /* Wheat text for better readability */
    font-family: 'Rockwell', 'Courier New', Courier, monospace !important; /* More readable, blocky font */
    position: relative;
    /* Simplified background for clarity */
    background-image: linear-gradient(to bottom, #3e2723, #1a1510);
    animation: forgeHeat 3s infinite alternate;
}

.forge strong {
    color: #ffa500 !important; /* Orange */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* Softened shadow */
}

.forge::before {
    content: "⚒️ FORGE MASTER";
    display: block;
    font-size: 0.7em;
    color: #ffa500;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes forgeHeat {
    0% { box-shadow: 0 0 15px #ff4500 inset; border-color: #8b4513; }
    100% { box-shadow: 0 0 30px #ff8c00 inset; border-color: #cd853f; }
}

/* Visual style for bureaucratic/official personas like Tome */
.bureaucratic {
    border: 3px double #2c3e50 !important; /* Dark blue double border */
    box-shadow: 0 0 10px #bdc3c7 inset;   /* Silver/Grey glow */
    background-color: #fdfbf7 !important; /* Very light parchment */
    color: #2c3e50 !important;            /* Dark blue ink text */
    font-family: 'Courier New', Courier, monospace !important; /* Typewriter font */
    position: relative;
}

.bureaucratic strong {
    color: #8e44ad !important; /* Purple for names */
    text-decoration: underline;
}

.bureaucratic::before {
    content: "📜 OFFICIAL RECORD";
    display: block;
    font-size: 0.7em;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    font-weight: bold;
    border-bottom: 1px solid #2c3e50;
}

/* Visual style for earthy/stone personas like Geb */
.earthy {
    border: 3px solid #5d4037 !important; /* Brown border */
    box-shadow: 0 0 15px #3e2723 inset;   /* Dark brown glow */
    background-color: #261e1b !important; /* Dark earthy background */
    color: #efebe9 !important;            /* Light brown text */
    font-family: 'Rockwell', serif !important;
    position: relative;
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="2" cy="2" r="1" fill="%235d4037" opacity="0.4"/><circle cx="12" cy="12" r="1" fill="%235d4037" opacity="0.4"/></svg>');
}

.earthy strong {
    color: #bcaaa4 !important; /* Brown for names */
    text-shadow: 1px 1px 0 #000;
}

.earthy::before {
    content: "🪨 STONE SPEAKS";
    display: block;
    font-size: 0.7em;
    color: #a1887f;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
    border-bottom: 1px solid #5d4037;
}

/* Visual style for predatory nature (Tendrils) */
.predatory-nature {
    border: 3px solid #556b2f !important; /* Dark Olive Green */
    box-shadow: 0 0 15px #006400 inset;   /* Dark Green glow */
    background-color: #1a241a !important; /* Very dark green background */
    color: #98fb98 !important;            /* Pale Green text */
    font-family: 'Georgia', serif !important;
    position: relative;
    /* Vine-like pattern */
    background-image: 
        linear-gradient(45deg, rgba(0, 100, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 100, 0, 0.1) 75%, rgba(0, 100, 0, 0.1)),
        linear-gradient(45deg, rgba(0, 100, 0, 0.1) 25%, transparent 25%, transparent 75%, rgba(0, 100, 0, 0.1) 75%, rgba(0, 100, 0, 0.1));
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    animation: predatoryPulse 5s infinite ease-in-out;
}

.predatory-nature strong {
    color: #adff2f !important; /* Green Yellow for names */
    text-shadow: 1px 1px 2px #000;
}

.predatory-nature::before {
    content: "🌲 THE FOREST CONSUMES";
    display: block;
    font-size: 0.7em;
    color: #6b8e23;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
    font-weight: bold;
}

@keyframes predatoryPulse {
    0% { box-shadow: 0 0 15px #006400 inset; border-color: #556b2f; }
    50% { box-shadow: 0 0 30px #228b22 inset, 0 0 10px #006400; border-color: #6b8e23; }
    100% { box-shadow: 0 0 15px #006400 inset; border-color: #556b2f; }
}

/* Visual style for lycanthropic personas */
.lycanthropic {
    border: 3px solid #8b4513 !important; /* SaddleBrown border */
    box-shadow: 0 0 15px #cd853f inset;   /* Peru glow */
    background-color: #3e2723 !important; /* Dark brown background */
    color: #fff8dc !important;            /* Cornsilk text */
    font-family: 'Georgia', serif !important;
    position: relative;
    /* Scratch marks pattern and moon glow */
    background-image: 
        linear-gradient(135deg, rgba(0,0,0,0.1) 25%, transparent 25%, transparent 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 75%, transparent 75%, transparent),
        radial-gradient(circle at 50% 0%, rgba(255, 250, 205, 0.1) 0%, transparent 70%);
    background-size: 20px 20px, 100% 100%;
    animation: lycanPulse 5s infinite ease-in-out;
}

.lycanthropic strong {
    color: #deb887 !important; /* BurlyWood for names */
    text-shadow: 1px 1px 2px #000;
}

.lycanthropic::before {
    content: "🌕 THE BEAST WITHIN";
    display: block;
    font-size: 0.7em;
    color: #deb887;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes lycanPulse {
    0% { box-shadow: 0 0 15px #cd853f inset; border-color: #8b4513; }
    50% { box-shadow: 0 0 25px #ffdead inset, 0 0 10px #cd853f; border-color: #a0522d; }
    100% { box-shadow: 0 0 15px #cd853f inset; border-color: #8b4513; }
}

/* Visual style for greedy/merchant personas like Mammon */
.greedy {
    border: 3px solid #ffd700 !important; /* Gold border */
    box-shadow: 0 0 15px #daa520 inset;   /* Goldenrod glow */
    background-color: #2c2c00 !important; /* Dark gold/brown background */
    color: #fff8dc !important;            /* Cornsilk text */
    font-family: 'Cinzel', serif !important;
    position: relative;
    /* Coin pattern */
    background-image: radial-gradient(circle, #ffd700 1px, transparent 1px);
    background-size: 20px 20px;
    animation: greedyPulse 4s infinite ease-in-out;
}

.greedy strong {
    color: #ffeb3b !important; /* Light gold for names */
    text-shadow: 1px 1px 2px #000;
}

.greedy::before {
    content: "💰 EVERYTHING HAS A PRICE";
    display: block;
    font-size: 0.7em;
    color: #ffd700;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes greedyPulse {
    0% { box-shadow: 0 0 15px #daa520 inset; border-color: #b8860b; }
    50% { box-shadow: 0 0 25px #ffd700 inset, 0 0 10px #daa520; border-color: #ffd700; }
    100% { box-shadow: 0 0 15px #daa520 inset; border-color: #b8860b; }
}

/* Visual style for volcanic/Hlimi Kingdoms personas */
.volcanic {
    border: 3px solid #4a0404 !important; /* Dark red-brown border */
    box-shadow: 0 0 15px #ff4500 inset;   /* OrangeRed glow */
    background-color: #1a0505 !important; /* Dark volcanic background */
    color: #f0f0f0 !important;            /* Off-white text */
    font-family: 'Verdana', sans-serif !important;
    position: relative;
    /* Ash and ember pattern */
    background-image: 
        radial-gradient(circle at 50% 50%, rgba(255, 69, 0, 0.1) 0%, transparent 10%),
        radial-gradient(circle at 20% 80%, rgba(255, 0, 0, 0.1) 0%, transparent 10%);
    background-size: 40px 40px;
    animation: volcanicHeat 4s infinite alternate;
}

.volcanic strong {
    color: #ff7f50 !important; /* Coral for names */
    text-shadow: 1px 1px 2px #000;
}

.volcanic::before {
    content: "🌋 FORGED IN MAGMA";
    display: block;
    font-size: 0.7em;
    color: #ff6347; /* Tomato */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes volcanicHeat {
    0% { box-shadow: 0 0 15px #ff4500 inset; border-color: #4a0404; }
    100% { box-shadow: 0 0 25px #ff8c00 inset; border-color: #8b0000; }
}

/* Visual style for aberrant/alien personas */
.aberrant {
    border: 3px solid #8a2be2 !important; /* BlueViolet */
    box-shadow: 0 0 15px #4b0082 inset;   /* Indigo glow */
    background-color: #0a000a !important; /* Very dark purple */
    color: #e6e6fa !important;            /* Lavender */
    font-family: 'Courier New', Courier, monospace !important;
    position: relative;
    /* Subtle warping background pattern */
    background-image: radial-gradient(circle at 50% 50%, rgba(138, 43, 226, 0.1) 0%, transparent 60%);
    animation: aberrantPulse 4s infinite ease-in-out;
}

.aberrant strong {
    color: #ff00ff !important; /* Magenta */
    text-shadow: 0 0 2px #9400d3;
}

.aberrant::before {
    content: "👁️ ABERRANT PRESENCE";
    display: block;
    font-size: 0.7em;
    color: #ba55d3; /* MediumOrchid */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes aberrantPulse {
    0% { box-shadow: 0 0 15px #4b0082 inset; border-color: #8a2be2; }
    50% { box-shadow: 0 0 30px #9400d3 inset, 0 0 10px #8a2be2; border-color: #ba55d3; }
    100% { box-shadow: 0 0 15px #4b0082 inset; border-color: #8a2be2; }
}

/* Visual style for fungal personas */
.fungal {
    border: 3px solid #8b4513 !important; /* SaddleBrown */
    box-shadow: 0 0 15px #556b2f inset;   /* DarkOliveGreen glow */
    background-color: #1a1510 !important; /* Very dark brown */
    color: #f0e68c !important;            /* Khaki text */
    font-family: 'Georgia', serif !important;
    position: relative;
    /* Spore pattern */
    background-image: radial-gradient(circle, rgba(107, 142, 35, 0.3) 1px, transparent 1px);
    background-size: 10px 10px;
    animation: fungalPulse 5s infinite ease-in-out;
}

.fungal strong {
    color: #9acd32 !important; /* YellowGreen */
}

.fungal::before {
    content: "🍄 FUNGAL COLONY";
    display: block;
    font-size: 0.7em;
    color: #6b8e23; /* OliveDrab */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes fungalPulse {
    0% { box-shadow: 0 0 15px #556b2f inset; border-color: #8b4513; }
    50% { box-shadow: 0 0 25px #6b8e23 inset, 0 0 5px #556b2f; border-color: #a0522d; }
    100% { box-shadow: 0 0 15px #556b2f inset; border-color: #8b4513; }
}

/* Visual style for passion/seduction personas */
.passion {
    border: 2px solid #c71585 !important; /* MediumVioletRed */
    box-shadow: 0 0 15px #c71585 inset;
    background-color: #1a050b !important; /* Very dark pink/purple */
    color: #ffe4e1 !important;            /* MistyRose */
    font-family: 'Garamond', serif !important;
    font-style: italic;
    text-shadow: 0 0 2px #ff69b4;
    position: relative;
    animation: passionPulse 4s infinite ease-in-out;
}

.passion strong {
    color: #ff1493 !important; /* DeepPink */
}

.passion::before {
    content: "💖 PASSIONATE PRESENCE";
    display: block;
    font-size: 0.7em;
    color: #ff69b4;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes passionPulse {
    0% { box-shadow: 0 0 15px #c71585 inset; border-color: #c71585; }
    50% { box-shadow: 0 0 25px #ff1493 inset, 0 0 5px #ff69b4; border-color: #ff1493; }
    100% { box-shadow: 0 0 15px #c71585 inset; border-color: #c71585; }
}

/* Visual style for stormy/lightning personas like Talos */
.stormy {
    border: 3px solid #ffd700 !important; /* Gold border */
    box-shadow: 0 0 15px #4682b4 inset;   /* SteelBlue glow */
    background-color: #2f4f4f !important; /* DarkSlateGray background */
    color: #e0ffff !important;            /* LightCyan text */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    position: relative;
    /* Lightning pattern */
    background-image: 
        linear-gradient(135deg, rgba(255, 255, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 0, 0.1) 50%, rgba(255, 255, 0, 0.1) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    animation: stormPulse 4s infinite alternate;
}

.stormy strong {
    color: #00bfff !important; /* DeepSkyBlue */
    text-shadow: 0 0 5px #ffd700;
}

.stormy::before {
    content: "⚡ STORM FRONT IMMINENT";
    display: block;
    font-size: 0.7em;
    color: #ffd700;
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes stormPulse {
    0% { box-shadow: 0 0 15px #4682b4 inset; border-color: #ffd700; }
    100% { box-shadow: 0 0 25px #b0c4de inset; border-color: #ffffff; }
}

/* Visual style for void/entropy personas */
.void {
    border: 3px solid #4b0082 !important; /* Indigo border */
    box-shadow: 0 0 15px #4b0082 inset;   /* Inner glow */
    background-color: #0d001a !important; /* Very dark purple/black background */
    color: #d8bfd8 !important;            /* Thistle text */
    font-family: 'Courier New', Courier, monospace !important;
    position: relative;
    /* Void-like pattern */
    background-image: radial-gradient(circle, rgba(75, 0, 130, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: voidPulse 5s infinite ease-in-out;
}

.void strong {
    color: #9932cc !important; /* DarkOrchid for names */
    text-shadow: 0 0 5px #4b0082;
}

.void::before {
    content: "⚫ THE VOID STARES BACK";
    display: block;
    font-size: 0.7em;
    color: #9370db; /* MediumPurple */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes voidPulse {
    0% { box-shadow: 0 0 15px #4b0082 inset; border-color: #4b0082; }
    50% { box-shadow: 0 0 30px #8a2be2 inset, 0 0 10px #4b0082; border-color: #8a2be2; }
    100% { box-shadow: 0 0 15px #4b0082 inset; border-color: #4b0082; }
}

/* Visual style for arcane/wizard personas */
.arcane {
    border: 2px solid #9932cc !important; /* DarkOrchid border */
    box-shadow: 0 0 15px #9932cc inset;   /* Inner glow */
    background-color: #1a0f2e !important; /* Dark purple-blue background */
    color: #e6e6fa !important;            /* Lavender text */
    font-family: 'Cinzel', 'Garamond', serif !important;
    position: relative;
    /* Runes or magical pattern */
    background-image: 
        radial-gradient(circle at 30% 30%, rgba(153, 50, 204, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 70% 70%, rgba(153, 50, 204, 0.1) 0%, transparent 20%);
    animation: arcanePulse 4s infinite ease-in-out;
}

.arcane strong {
    color: #d8bfd8 !important; /* Thistle for names */
    text-shadow: 0 0 5px #9932cc;
}

.arcane::before {
    content: "🔮 ARCANE RESONANCE";
    display: block;
    font-size: 0.7em;
    color: #ba55d3; /* MediumOrchid */
    text-align: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
    opacity: 0.9;
}

@keyframes arcanePulse {
    0% { box-shadow: 0 0 15px #9932cc inset; border-color: #9932cc; }
    50% { box-shadow: 0 0 30px #da70d6 inset, 0 0 10px #9932cc; border-color: #da70d6; } /* Orchid pulse */
    100% { box-shadow: 0 0 15px #9932cc inset; border-color: #9932cc; }
}