@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');
/* Authentic 17th-century occult manuscript fonts */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@1&family=UnifrakturMaguntia&display=swap');

body {
    margin: 0;
    padding: 10px;
    background-color: #0d0d0d;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    box-sizing: border-box;
    transition: background-color 0.4s ease;
}

#devil-minigame-container {
    width: 100%;
    max-width: 420px; 
    font-family: 'VT323', monospace;
    font-size: 22px; 
    background-color: #2b0b0a;
    border: 3px solid #5a3c1e;
    border-radius: 8px;
    padding: 15px; 
    color: #e5e5e5;
    box-sizing: border-box;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.8);
    display: flex;
    flex-direction: column;
}

#dialogue-text, #options-container, .chathead-container {
    transition: opacity 0.3s ease, filter 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.blood-smoke-out {
    opacity: 0 !important;
    filter: blur(5px) !important;
    color: #8a0303 !important;
    text-shadow: 0 0 15px #8a0303 !important;
}

.osrs-dialogue-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; 
    text-align: center;
}

/* --- THE COOLER CHATHEAD UPGRADE --- */
.chathead-container img { 
    width: 85px; 
    height: 85px; 
    object-fit: contain; 
    border-radius: 6px; 
    padding: 5px; 
    
    /* Clean, flat, very dark background to let the red art stand out */
    background-color: #140403; 
    
    /* Simple, subtle border */
    border: 2px solid #3a0e0c; 
    
    /* Standard drop shadow to lift it off the background slightly */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); 
}

.dialogue-content { width: 100%; }
#dialogue-text { margin: 0; line-height: 1.1; letter-spacing: 0.5px; }
#dialogue-text br { display: block; margin-top: 8px; content: ""; }

/* --- FIXED RAGE TEXT REGRESSION --- */
.raging-text {
    color: #ff1a1a;
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.9);
    
    /* These two lines fix the spaces disappearing! */
    display: inline-block; 
    white-space: pre-wrap; 
    
    animation: fastVibrate 0.08s linear infinite;
}

@keyframes fastVibrate {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    25% { transform: translate(-1px, -1px) rotate(-1deg); }
    50% { transform: translate(1px, -1px) rotate(1deg); }
    75% { transform: translate(-1px, 1px) rotate(0deg); }
    100% { transform: translate(1px, 1px) rotate(1deg); }
}

.osrs-options-container { margin-top: 15px; display: flex; flex-direction: column; gap: 8px; }

.osrs-btn {
    font-family: 'VT323', monospace; font-size: 22px; padding: 8px 12px; border-radius: 5px; cursor: pointer;
    background-color: #1a0605; color: #e5e5e5; border: 1px solid #5a3c1e; text-align: center; transition: 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.osrs-btn:active, .osrs-btn:hover { background-color: #8a0303; color: #fdbb0a; border-color: #ff3333; box-shadow: 0 0 10px rgba(255, 0, 0, 0.3); }

.passphrase-container { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.passphrase-input { background-color: #1a0605; border: 2px solid #5a3c1e; color: #fdbb0a; font-family: 'VT323', monospace; font-size: 24px; padding: 8px; border-radius: 5px; text-align: center; width: 80%; outline: none; text-transform: lowercase; }

.meal-deal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 320px; margin: 0 auto; }
.grid-item { aspect-ratio: 1 / 1; background-color: #1a0605; border: 2px solid #3a0e0c; border-radius: 5px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-size: 13px; color: #8c8c8c; text-align: center; padding: 5px; user-select: none; transition: 0.1s ease;}
.grid-image { width: 55%; height: 55%; object-fit: contain; pointer-events: none; }
.grid-item.selected { border-color: #8a0303; background-color: #3a0e0c; color: #fdbb0a; box-shadow: 0 0 8px rgba(255, 0, 0, 0.4); transform: scale(1.03); }

.trade-screen { display: flex; gap: 10px; width: 100%; margin-bottom: 5px; font-size: 18px; text-align: left; }
.trade-column { flex: 1; border: 2px solid #5a3c1e; background-color: #1a0605; padding: 8px; border-radius: 5px; }
.trade-column h3 { margin: 0 0 8px 0; color: #fdbb0a; text-align: center; font-size: 20px; border-bottom: 1px solid #3a0e0c; padding-bottom: 5px; }
.trade-item { margin: 3px 0; color: #e5e5e5; display: flex; align-items: center; }

.blood-btn { position: relative; overflow: hidden; background-color: #1a0605; color: #8c8c8c; border: 2px solid #3a0e0c; padding: 15px; font-size: 24px; cursor: pointer; border-radius: 5px; font-family: 'VT323', monospace; text-transform: uppercase; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; text-align: center; display: flex; justify-content: center; align-items: center;}
.blood-fill { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; background-color: #8a0303; z-index: 0; }
.blood-text { position: relative; z-index: 1; pointer-events: none; transition: color 0.1s; }

/* --- THE TRUE DEMONIC CONTRACT --- */
.pactum-contract {
    background: linear-gradient(145deg, #1f120d 0%, #080302 100%);
    border: 1px solid #3b1717;
    border-top: 3px solid #731212; 
    border-radius: 3px;
    padding: 25px 20px;
    width: 90%;
    margin: 10px auto;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.95), 0 8px 20px rgba(0,0,0,0.8);
}

/* Authentic Intersecting Inverted Pentagram */
.pactum-sigil {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    width: 250px;
    height: 250px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,5 79,90 5,35 95,35 21,90" fill="none" stroke="%238a0303" stroke-width="1.5" opacity="0.15"/><circle cx="50" cy="50" r="45" fill="none" stroke="%238a0303" stroke-width="1.5" opacity="0.15"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 0;
    pointer-events: none;
}

.pactum-content { position: relative; z-index: 1; }

.pactum-title {
    font-family: 'UnifrakturMaguntia', cursive; 
    color: #8c7365;
    text-align: center; 
    font-size: 32px; 
    margin: 0 0 20px 0; 
    border-bottom: 1px solid rgba(140, 115, 101, 0.2); 
    padding-bottom: 10px;
    letter-spacing: 1px;
}

.pactum-terms { 
    font-family: 'IM Fell English', serif; 
    font-style: italic;
    color: #6b5548; 
    font-size: 18px; 
    line-height: 1.4; 
}
.pactum-terms p { margin: 0 0 5px 0; }

.pactum-items {
    font-family: 'VT323', monospace; color: #9e2a2b; font-size: 20px; margin-bottom: 15px !important; display: block;
    font-style: normal; 
}

.pactum-divider { height: 1px; background-color: rgba(140, 115, 101, 0.15); margin: 15px 0; }

.pactum-splatter {
    position: absolute;
    bottom: -10px;
    right: 5px;
    width: 150px;
    height: 100px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><path d="M45,30 Q30,20 25,40 T35,65 Q50,75 70,60 T75,35 Q60,25 45,30" fill="%235e0808" opacity="0.6"/><circle cx="15" cy="20" r="4" fill="%235e0808" opacity="0.5"/><circle cx="85" cy="25" r="5" fill="%235e0808" opacity="0.6"/><circle cx="80" cy="75" r="3" fill="%235e0808" opacity="0.8"/><circle cx="25" cy="80" r="6" fill="%235e0808" opacity="0.5"/><circle cx="10" cy="50" r="2" fill="%235e0808" opacity="0.6"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

.pactum-signature {
    font-family: 'Rock Salt', cursive;
    color: #b51010; 
    font-size: 22px;
    text-align: right;
    margin-top: 25px;
    transform: rotate(-4deg);
    text-shadow: 0px 0px 3px rgba(181, 16, 16, 0.4);
    position: relative;
    z-index: 2; 
    opacity: 0;
    transition: opacity 1.5s ease;
}

.delayed-ending-btn { opacity: 0; animation: delayedFade 1s ease forwards; animation-delay: 2s; }
@keyframes delayedFade { to { opacity: 1; } }