/* General Styles */

body {

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

    background-color: #1c1c2e;

    color: #e0e0e0;

    margin: 0;

    padding: 0;

    line-height: 1.6;

    background-image: url('Pathfinder-background.webp');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

}



.container {

    max-width: 1200px;

    margin: 100px auto 20px auto;

    padding: 20px;

    background-color: rgba(30, 30, 60, 0.9);

    border-radius: 8px;

    box-shadow: 0 0 20px rgba(128, 0, 128, 0.5);

    position: relative;

    overflow: hidden;

}



h1, h2, h3 {

    color: #bb86fc;

    text-shadow: 0 0 10px rgba(187, 134, 252, 0.7);

}



h1 {

    text-align: center;

    font-size: 2.5em;

    margin-bottom: 30px;

}



/* Navigation */

#progress-bar {

    display: flex;

    justify-content: space-between;

    background-color: #292945;

    border-radius: 5px;

    overflow: hidden;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1000;

    padding: 10px;

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

}



.step {

    flex: 1;

    padding: 10px;

    text-align: center;

    background-color: #373762;

    color: #888;

    font-weight: bold;

    cursor: pointer;

    transition: all 0.3s ease;

}



.step.active {

    background-color: #6200ee;

    color: #fff;

    box-shadow: 0 0 10px rgba(187, 134, 252, 0.7);

}



/* Content Sections */

.step-content {

    display: none;

}



.step-content.active {

    display: block;

}



.dg-box {

    background-color: rgba(100, 50, 150, 0.2);

    border: 1px solid #6200ee;

    padding: 15px;

    margin-bottom: 20px;

    border-radius: 4px;

    box-shadow: 0 0 10px rgba(187, 134, 252, 0.3);

}



/* Tables */

table {

    width: 100%;

    border-collapse: collapse;

    margin-bottom: 1rem;

    font-size: 0.9em;

}



th, td {

    border: 1px solid #6200ee;

    padding: 8px;

    text-align: left;

}



th {

    background-color: #6200ee;

    color: #fff;

}



/* Form Elements */

input, select, button {

    background-color: #373762;

    border: 1px solid #6200ee;

    color: #e0e0e0;

    padding: 8px;

    border-radius: 4px;

    font-size: 14px;

}



button {

    background-color: #6200ee;

    color: #fff;

    cursor: pointer;

    transition: background-color 0.3s;

}



button:hover {

    background-color: #bb86fc;

}



/* 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;

}



/* Initiative Tracker */

#initiative-list {

    list-style-type: none;

    padding: 0;

    margin: 10px 0;

}



.initiative-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 10px;

    padding: 10px;

    background-color: rgba(100, 50, 150, 0.1);

    border-radius: 4px;

}



.initiative-item.current-turn {

    background-color: rgba(98, 0, 238, 0.2);

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

}



.initiative-item.start-of-round,

.initiative-item.end-of-round {

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

    font-weight: bold;

}



.hp-input {

    width: 50px;

    margin: 0 5px;

}



/* Effect Timer */

#active-effects {

    list-style-type: none;

    padding: 0;

}



#active-effects li {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 5px;

}



/* Floating Symbols */

.floating-symbol {

    position: absolute;

    color: rgba(187, 134, 252, 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);

    }

}



/* Custom Scrollbar */

::-webkit-scrollbar {

    width: 10px;

}



::-webkit-scrollbar-track {

    background: #292945;

}



::-webkit-scrollbar-thumb {

    background: #6200ee;

    border-radius: 5px;

}



::-webkit-scrollbar-thumb:hover {

    background: #bb86fc;

}



/* Responsive Design */

@media (max-width: 768px) {

    .container {

        padding: 10px;

        margin-top: 150px;

    }



    #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;

    }



    #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(100, 50, 150, 0.1);

    border: 1px solid #6200ee;

    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;

}