/* Import Google Fonts */
/* font-family: 'MedievalSharp', cursive; */
/* font-family: 'Libre Baskerville', serif; */

body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/mod3.png'); /* Find a dark fantasy texture */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #808080;/*#1a1a1a; */
    color: #eee;
    font-family: 'Libre Baskerville', serif;
}

/* The main 'parchment' card style */
.parchment {
/*background-image: url('../img/parchment.jpg');  Find a parchment texture */

    /* This adds a 50% transparent black layer on top of the image */
    background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('../img/parchment_bg.jpg');
    
    background-size: cover;
    color: #3a2a1a; /* Dark brown text */
    border: 3px solid #5a4a3a;
    border-radius: 2px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

/* Title Font */
.medieval-title {
    font-family: 'MedievalSharp', cursive;
    color: #8b0000; /* Dark red */
    font-weight: bold;
    font-size: 2.5rem;
}

.card-title.medieval-title {
     font-size: 2.2rem;
}
.card-text {
    color:white;   

}
.modal-title.medieval-title {
    font-size: 1.8rem;
}

/* Label Font */
.medieval-label {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.3rem;
    color: #5a4a3a;
}

/* Story Text */
.story-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color:#808080;
}

/* Button Style */
.medieval-btn {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.2rem;
    letter-spacing: 1px;
    background-color: #5a4a3a;
    border-color: #3a2a1a;
    color: #fdf5e6;
    border-radius: 2px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    transition: all 0.2s ease-in-out;
}

.medieval-btn:hover {
    background-color: #3a2a1a;
    border-color: #1a0a00;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Form inputs on parchment */
.parchment .form-control,
.parchment .form-select {
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid #8a7a6a;
    color: #3a2a1a;
}

.parchment .form-control:focus,
.parchment .form-select:focus {
    background-color: #fff;
    border-color: #5a4a3a;
    box-shadow: 0 0 0 0.25rem rgba(90, 74, 58, 0.25);
    color: #3a2a1a;
}

/* Modal styling */
.modal-content.parchment {
    border: 3px solid #5a4a3a;
}

.modal-header {
    border-bottom: 2px solid #8a7a6a;
}
.modal-footer {
    border-top: 2px solid #8a7a6a;
}


/* --- COMBAT STYLES --- */
body.combat-body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../img/dnd-bg.jpg');
}

.combat-arena {
    max-width: 900px;
    border: 3px solid #5a4a3a;
}

.combat-img {
    max-height: 250px;
    width: auto;
    object-fit: contain;
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter: drop-shadow(5px 5px 5px #222);
}

.health-bar-container {
    background-color: #5a4a3a;
    border: 2px solid #3a2a1a;
    height: 25px;
    border-radius: 5px;
    padding: 2px;
}

.health-fill {
    background-color: #8b0000;
    height: 100%;
    width: 100%;
    border-radius: 3px;
    transition: width 0.5s ease-in-out;
}

.combat-log {
    background-color: rgba(0, 0, 0, 0.1);
    height: 200px;
    border: 1px solid #8a7a6a;
    overflow-y: scroll;
    display: flex;
    flex-direction: column-reverse;
}

.combat-log > div {
    padding: 8px;
    border-bottom: 1px dashed #8a7a6a;
}
.combat-log .system-message {
    font-style: italic;
    color: #5a4a3a;
}
.combat-log .player-attack {
    font-weight: bold;
    color: #004400;
}
.combat-log .enemy-attack {
    font-weight: bold;
    color: #8b0000;
}


/* --- NAVBAR STYLES --- */

/* Make nav links use our label font */
.navbar .nav-link.medieval-label {
    font-size: 1.1rem;
    color: #5a4a3a;
}
.navbar .nav-link.medieval-label:hover {
    color: #8b0000;
}

/* Style the parchment dropdown menu */
.dropdown-menu.parchment {
    border: 3px solid #5a4a3a;
    padding: 0;
}

/* Style the links inside the parchment dropdown */
.dropdown-menu.parchment .dropdown-item {
    color: #3a2a1a;
    font-family: 'Libre Baskerville', serif;
}

.dropdown-menu.parchment .dropdown-item.medieval-label {
    font-family: 'MedievalSharp', cursive;
    font-size: 1.1rem;
}

.dropdown-menu.parchment .dropdown-item:hover {
    background-color: rgba(90, 74, 58, 0.1);
    color: #8b0000;
}

/* Style the divider (the <hr> tag) */
.dropdown-menu.parchment .dropdown-divider {
    border-top: 2px solid #8a7a6a;
}