/* General Styles */

body {

    font-family: 'Roboto', Arial, sans-serif;

    background-color: #0a0a0a;

    color: #e0e0e0;

    margin: 0;

    padding: 0;

    line-height: 1.6;

    background-image: url('delta-green-background.jpg');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}



.container {

    max-width: 1200px;

    margin: 20px auto;

    padding: 20px;

    background-color: rgba(20, 20, 20, 0.9);

    border-radius: 8px;

    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);

    position: relative;

    overflow: hidden;

}



h1, h2, h3 {

    color: #00ff00;

    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);

}



h1 {

    text-align: center;

    font-size: 2.5em;

    margin-bottom: 30px;

}



/* Navigation */

#progress-bar {

    display: flex;

    justify-content: space-between;

    margin-bottom: 30px;

    background-color: #1a1a1a;

    border-radius: 5px;

    overflow: hidden;

}



.step {

    flex: 1;

    padding: 10px;

    text-align: center;

    background-color: #2a2a2a;

    color: #888;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

}



.step.active {

    background-color: #006400;

    color: #fff;

    box-shadow: 0 0 10px rgba(0, 255, 0, 0.5);

}



/* Content Sections */

.step-content {

    display: none;

}



.step-content.active {

    display: block;

}



.dg-box {

    background-color: rgba(0, 100, 0, 0.2);

    border: 1px solid #006400;

    padding: 15px;

    margin-bottom: 20px;

    border-radius: 4px;

    box-shadow: 0 0 10px rgba(0, 255, 0, 0.1);

}



/* Tables */

table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 1rem;

    font-size: 0.9em;

}



th, td {

    border: 1px solid #006400;

    padding: 8px;

    text-align: left;

}



th {

    background-color: #006400;

    color: #fff;

}



/* Form Elements */

input, select, button {

    background-color: #2a2a2a;

    border: 1px solid #006400;

    color: #e0e0e0;

    padding: 8px;

    border-radius: 4px;

    font-size: 14px;

}



button {

    background-color: #006400;

    color: #fff;

    cursor: pointer;

    transition: background-color 0.3s;

}



button:hover {

    background-color: #008000;

}



/* Tools Section */

#tools {

    display: flex;

    justify-content: space-between;

    margin-top: 20px;

}



#dice-roller, #timer {

    width: 48%;

}



#time-display {

    font-size: 2rem;

    text-align: center;

    margin-bottom: 10px;

}



/* Combat Tracker Styles */

#initiative-list {

    list-style-type: none;

    padding: 0;

}



#initiative-list li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    padding: 5px;

    background-color: rgba(0, 100, 0, 0.2);

    border: 1px solid #006400;

    border-radius: 4px;

}



.hp-input {

    width: 50px;

    margin-left: 10px;

}



.remove-combatant {

    background-color: #8B0000;

    color: white;

    border: none;

    padding: 5px 10px;

    cursor: pointer;

    border-radius: 4px;

}



.remove-combatant:hover {

    background-color: #A52A2A;

}



/* Modal Styles */

.modal {

    display: none;

    position: fixed;

    z-index: 1;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

}



.modal-content {

    background-color: #2a2a2a;

    margin: 15% auto;

    padding: 20px;

    border: 1px solid #006400;

    width: 300px;

    border-radius: 4px;

}



.modal-content h3 {

    margin-top: 0;

}



.modal-content label {

    display: block;

    margin-top: 10px;

}



.modal-content input {

    width: 100%;

    margin-bottom: 10px;

}



.modal-content button {

    margin-top: 10px;

    margin-right: 10px;

}



/* Floating Symbols */

.floating-symbol {

    position: absolute;

    color: rgba(0, 255, 0, 0.1);

    font-size: 24px;

    pointer-events: none;

    animation: float 10s infinite linear;

}



@keyframes float {

    0% {

        transform: translateY(0) rotate(0deg);

    }

    50% {

        transform: translateY(-20px) rotate(180deg);

    }

    100% {

        transform: translateY(0) rotate(360deg);

    }

}



/* Sanity Meter */

#sanity-meter {

    position: fixed;

    top: 20px;

    right: 20px;

    width: 20px;

    height: 200px;

    background-color: rgba(255, 255, 255, 0.1);

    border: 1px solid #006400;

    border-radius: 10px;

    overflow: hidden;

}



#sanity-fill {

    width: 100%;

    height: 100%;

    background-color: #00ff00;

    transition: height 0.5s, background-color 0.5s;

}



/* Mythos Entity Hover Effect */

.mythos-entity {

    cursor: pointer;

    transition: text-shadow 0.3s;

}



/* Eldritch Mode */

.eldritch-mode {

    animation: eldritch-pulse 5s infinite;

}



@keyframes eldritch-pulse {

    0%, 100% {

        filter: hue-rotate(0deg) saturate(100%);

    }

    50% {

        filter: hue-rotate(180deg) saturate(200%);

    }

}



.eldritch-mode .container {

    animation: eldritch-shake 0.5s infinite;

}



@keyframes eldritch-shake {

    0%, 100% {

        transform: translateX(0);

    }

    25% {

        transform: translateX(-5px) rotate(-0.5deg);

    }

    75% {

        transform: translateX(5px) rotate(0.5deg);

    }

}



/* Custom Scrollbar */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #1a1a1a;

}



::-webkit-scrollbar-thumb {

    background: #006400;

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: #008000;

}



/* Responsive Design */

@media (max-width: 768px) {

    .container {

        padding: 10px;

    }



    #tools {

        flex-direction: column;

    }



    #dice-roller, #timer {

        width: 100%;

        margin-bottom: 20px;

    }



    table, thead, tbody, th, td, tr {

        display: block;

    }



    thead tr {

        position: absolute;

        top: -9999px;

        left: -9999px;

    }



    tr {

        margin-bottom: 10px;

    }



    td {

        border: none;

        position: relative;

        padding-left: 50%;

    }



    td:before {

        content: attr(data-label);

        position: absolute;

        left: 6px;

        width: 45%;

        padding-right: 10px;

        white-space: nowrap;

        font-weight: bold;

    }



    #sanity-meter {

        width: 150px;

        height: 15px;

        top: auto;

        bottom: 20px;

        left: 50%;

        transform: translateX(-50%);

    }



    #sanity-fill {

        width: 0%;

        height: 100%;

        transition: width 0.5s, background-color 0.5s;

    }



    #progress-bar {

        flex-wrap: wrap;

    }



    .step {

        flex-basis: 33.33%;

    }

}



/* Additional Styles for New Elements */

#clue-result, #npc-result, #event-result {

    margin-top: 10px;

    padding: 10px;

    background-color: rgba(0, 100, 0, 0.1);

    border: 1px solid #006400;

    border-radius: 4px;

}



#generate-clue, #generate-npc, #generate-event {

    margin-bottom: 10px;

}



.equipment-list td:nth-child(2) {

    text-align: right;

}



.ritual-components td:first-child {

    font-weight: bold;

}