/*
Plugin Name: Mushroom Custom Editor
Description: This removes the nasty tinymce and replaces it with a slimline, easy to customise editor and add styling options.
Version: 2.0
Author: Mushroom
Author URI: http://localhost/mushroom-education
*/
/* Bullet Point */
#rpg-canvas ul {
    list-style-type: disc !important;
    margin-left: 20px !important;
    padding-left: 20px !important;
}
#rpg-canvas li {
    display: list-item !important;
    margin-bottom: 4px;
}

/* Ensure text alignment works seamlessly on inline elements like images */
#rpg-canvas [style*="text-align: center"] img,
#rpg-canvas [style*="text-align:center"] img {
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}
.rpg-media-align-center, .rpg-video-align-center {
	margin-left: auto !important; 
	margin-right: auto !important;
}
.rpg-media-align-left, .rpg-video-align-left  {
	margin-left: 0 !important; 
	margin-right: auto !important;
}

/* Styling RPG Elements frontend */
.bluebox {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: blue !important;
	border-radius: 3px;
    background-color: #b6dbf8 !important;
    padding: 15px 10px 15px 20px !important;
}

.yellowbox {
    background-color: cornsilk !important;
    padding: 15px 10px 15px 15px !important;
    box-shadow: 0px 5px 10px darkblue;
    margin-bottom: 10px;
    border-radius: 3px;
}

.blue-border {
    border-width: 2px;
    border-style: solid;
    border-color: darkblue;
	border-radius: 3px;
    margin: 5px;
    padding: 5px;
}

.scroll {
    background: linear-gradient(to bottom, #f7e6c4 0%, #f1d6a7 100%);
    
    /* 1. Define 12px border width and style */
    border-style: solid;
    border-width: 0 12px;
    
    /* 2. Left Scroll Roll Gradient (Dark Brown -> Center Highlight -> Dark Brown) */
    border-image: linear-gradient(
        to right,
        #3e2723 0%,
        #8d5b2d 20%,
        #f1d6a7 50%,
        #8d5b2d 80%,
        #3e2723 100%
    ) 1 100%;

    padding: 20px 25px;
    margin: 15px 0;
    border-radius: 4px;
    box-shadow: inset 0 0 15px rgba(115, 70, 19, 0.3), 0 4px 10px rgba(0, 0, 0, 0.15);
    font-family: 'Georgia', serif;
    color: #3e2723;
}

.jungle {
    background: #1c3829;
    border: 3px solid #4ade80;
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0,0,0,0.3);
}
/* Creeper vine corner accents using inline SVG / CSS */
.jungle::before {
    content: "🌿";
    position: absolute;
    top: -12px;
    left: -10px;
    font-size: 24px;
}
.jungle::after {
    content: "🌿";
    position: absolute;
    bottom: -12px;
    right: -10px;
    font-size: 24px;
    transform: rotate(180deg);
}

.scifi {
    /* 1. Radial background: Slate core blending out to pitch black at the edges */
    background: radial-gradient(circle at center, #1e293b 0%, #0a0e17 70%, #000000 100%);
    
    /* 2. Neon Blue linear gradient border (dark blue -> bright cyan/white core -> dark blue) */
    border: 2px solid;
    border-image: linear-gradient(135deg, #0369a1 0%, #38bdf8 25%, #ffffff 50%, #38bdf8 75%, #0369a1 100%) 1;
    
    color: #f0f9ff;
    padding: 20px;
    position: relative;
    margin: 15px 0;
    
    /* Glowing neon box shadow */
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4), inset 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Top-Left Corner Icon / Accent */
.scifi::before {
    content: "🤖"; /* Swap with your image tag or another emoji like ⚙️ or ⚡ */
    position: absolute;
    top: -12px;
    left: -10px;
    font-size: 22px;
    filter: drop-shadow(0 0 6px #38bdf8);
}

/* Bottom-Right Corner Icon / Accent */
.scifi::after {
    content: "⚙️"; /* Swap with your image tag or another emoji like 🤖 or ⚡ */
    position: absolute;
    bottom: -12px;
    right: -10px;
    font-size: 22px;
    transform: rotate(90deg);
    filter: drop-shadow(0 0 6px #38bdf8);
}
/* Example how to replace emojis with img
 .scifi::before {
    content: "";
    position: absolute;
    top: -12px;
    left: -10px;
    width: 24px;
    height: 24px;
    background: url('path/to/your/scifi-icon.png') no-repeat center / contain;
    filter: drop-shadow(0 0 6px #38bdf8);
}
 */
.spooky-fog {
    background: #050507;
    border: 1px solid #27272a;
    color: #d4d4d8;
    padding: 22px;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 15px 0;
    
    /* Pitch black inset vignette with a subtle, ominous dark-violet shadow */
    box-shadow: inset 0 0 35px 15px #000000, 0 8px 20px rgba(0, 0, 0, 0.85);
    animation: spookyVignettePulse 10s ease-in-out infinite alternate;
}

/* Bottom-heavy creeping shadow mist */
.spooky-fog::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 1;
    background: 
        linear-gradient(0deg, 
            rgba(39, 39, 42, 0.45) 0%, 
            rgba(24, 24, 27, 0.25) 30%, 
            transparent 75%
        ),
        linear-gradient(90deg, 
            rgba(0, 0, 0, 0.6) 0%, 
            transparent 25%, 
            rgba(0, 0, 0, 0.6) 100%
        );
    animation: fogDriftHorizontal 24s ease-in-out infinite alternate;
}

/* Secondary dark haze layer drifting diagonally */
.spooky-fog::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    pointer-events: none;
    z-index: 1;
    background: 
        linear-gradient(120deg, 
            transparent 20%, 
            rgba(63, 63, 70, 0.2) 45%, 
            rgba(24, 24, 27, 0.3) 60%, 
            transparent 80%
        );
    animation: fogDriftDiagonal 30s ease-in-out infinite alternate;
}

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

/* Ominous breathing vignette: Darkness tightens and loosens */
@keyframes spookyVignettePulse {
    0% {
        box-shadow: inset 0 0 45px 20px #000000, 0 10px 25px rgba(0, 0, 0, 0.95);
        border-color: #18181b;
    }
    50% {
        box-shadow: inset 0 0 25px 10px #000000, 0 5px 15px rgba(15, 10, 25, 0.6);
        border-color: #27272a;
    }
    100% {
        box-shadow: inset 0 0 40px 18px #000000, 0 8px 22px rgba(20, 10, 30, 0.8);
        border-color: #3f3f46;
    }
}
.eerie-glow {
    background: #0f0f12;
    border: 1px solid #3f3f46;
    color: #e4e4e7;
    padding: 20px;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    margin: 15px 0;
    
    /* Animated ambient glow morphing between purple and slate */
    animation: eeriePulseGlow 8s ease-in-out infinite alternate;
}

.eerie-glow::before {
    content: '';
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    pointer-events: none;
    z-index: 1;
    background: 
        linear-gradient(90deg, 
            transparent 0%, 
            rgba(161, 161, 170, 0.2) 35%, 
            rgba(168, 85, 247, 0.18) 50%, 
            rgba(161, 161, 170, 0.2) 65%, 
            transparent 100%
        ),
        linear-gradient(0deg, 
            transparent 10%, 
            rgba(212, 212, 216, 0.15) 50%, 
            transparent 90%
        );
    animation: fogDriftHorizontal 16s ease-in-out infinite alternate,
               eerieMorphColors 12s ease-in-out infinite alternate;
}

.eerie-glow::after {
    content: '';
    position: absolute;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    pointer-events: none;
    z-index: 1;
    background: 
        linear-gradient(135deg, 
            transparent 15%, 
            rgba(192, 132, 252, 0.18) 40%, 
            rgba(147, 130, 180, 0.2) 60%, 
            transparent 85%
        );
    animation: fogDriftDiagonal 22s ease-in-out infinite alternate,
               eerieMorphColors 10s ease-in-out infinite alternate-reverse;
}

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

@keyframes eeriePulseGlow {
    0% {
        box-shadow: 0 0 35px 12px rgba(126, 34, 206, 0.45), inset 0 0 25px rgba(0, 0, 0, 0.95);
        border-color: #581c87;
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(113, 113, 122, 0.25), inset 0 0 15px rgba(0, 0, 0, 0.85);
        border-color: #3f3f46;
    }
    100% {
        box-shadow: 0 0 30px 10px rgba(147, 51, 234, 0.35), inset 0 0 20px rgba(0, 0, 0, 0.9);
        border-color: #6b21a8;
    }
}

@keyframes eerieMorphColors {
    0% { filter: hue-rotate(0deg) saturate(1); }
    50% { filter: hue-rotate(-20deg) saturate(0.2); }
    100% { filter: hue-rotate(25deg) saturate(1.3); }
}
/* Keyframes shared by Spooky Fog and Eerie Glow */
@keyframes fogDriftHorizontal {
    0% { transform: translate(-15%, -5%); }
    50% { transform: translate(5%, 10%); }
    100% { transform: translate(15%, -10%); }
}

@keyframes fogDriftDiagonal {
    0% { transform: translate(10%, 10%) scale(1); }
    50% { transform: translate(-10%, -5%) scale(1.05); }
    100% { transform: translate(-15%, 12%) scale(1); }
}