/* Base styles for the layout */
body {
    margin: 0;
    margin-bottom: 500px;
    padding: 0;
    background-color: #100914;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: Arial, sans-serif;
    color: #e0e0ff; /* Light neon blue text */
}

.card {
    background-color: #1a0026; /* Darker purple card background */
    padding: 1.25em; /* 20px converted to em */
    margin-top: 1.25em; /* 20px */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    width: 340px; /* 300px converted to em */
    overflow-x: none;
    overflow-y: scroll;
}

.profile-info-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 1.25em; /* 20px */
}


.profile-square span {
    font-size: 0.875em; /* 14px converted to em */
    color: #00f6ff; /* Neon blue text */
    position: absolute;
}

.info-container {
    display: flex;
    flex-direction: column;
    margin-left: 0.9375em; /* 15px converted to em */
    flex-grow: 1;
}

.name {
    font-weight: bold;
    font-size: 1.5em; /* 24px converted to em */
    text-align: left;
    margin-bottom: 0.625em; /* 10px */
    color: #00f6ff; /* Neon blue text */
}

.hp-container {
    display: flex;
    align-items: center;
}

.hp-container strong {
    margin-right: 0.625em; /* 10px */
    color: #00f6ff; /* Neon blue text */
}

.hp {
    display: flex;
}

.hp span {
    width: 1.25em; /* 20px converted to em */
    height: 1.25em;
    margin: 0 0.125em; /* 2px */
    border-radius: 50%;
}

.hp .active {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.8); /* Neon glow */
    background-color: #00f6ff; /* Neon blue */
}

.hp .inactive {
    background-color: rgba(63, 46, 72, 0.612);
}

.inventory {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 5em; /* 80px */
    gap: 0.625em; /* 10px */
    margin-top: 0.625em;
}

.item-slot {
    border-radius: 10px;
    background-color: rgba(0, 246, 255, 0.1); /* Neon transparent background */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.item-slot.large {
    grid-column: span 2;
    grid-row: span 2;
}

.item-slot.medium {
    grid-column: span 2;
}

.item-slot span {
    padding: 1em;
    text-align: center;
    line-height: 1.3em;
    color: #00f6ff; /* Neon blue text */
}

.item-slot.occupied {
    opacity: 1;
    background-color: rgba(0, 247, 255, 0.195); /* Neon background for occupied slots */
    cursor: pointer;
}

.item-slot:hover {
    scale: 1.05;
}

.collection-item {
    background-color: rgba(255, 255, 0, 0.1) !important;  /* Light yellow transparent background */
}

.collection-item span {
    color: #ffff00 !important; /* Yellow text */
}

.collection-items {
    margin-top: 10px;
    margin-left: 20px; /* Indent collection items */
}

/* Optional: Style for toggling text (Open/Close) */
.item-slot:hover {
    cursor: pointer;
}

.tactics, .discoverys {
    /* Use the same styles as .inventory */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 5em; /* 80px */
    gap: 0.625em; /* 10px */
    margin-top: 0.625em;
}

.description-card {
    width: 340px; /* 300px */
    height: auto;
    background-color: #1a0026; /* Dark purple background */
    border-radius: 10px;
    color: #e0e0ff; /* Light neon blue text */
}

.description-card p {
    margin: 0;
    padding: 0.3125em 0; /* 5px */
}

.description-card strong {
    font-size: 1.125em; /* 18px */
    color: #00f6ff; /* Neon blue */
}


.profile-details {
    border-radius: 10px;
    color: #e0e0ff;
    font-size: 0.9em;
}

.profile-details ul {
    list-style-type: none;
    padding: 0;
}

.profile-details hr {
    border: none;
    border-top: 1px solid #00f6ff; /* Neon blue */
    margin: 1em 0;
}


.profile-details li {
    margin-bottom: 0.5em;
}

.profile-details strong {
    color: #00f6ff;
}