body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 0; /* Remove default margin for better mobile control */
    padding: 10px; /* Add padding for mobile */
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 15px; /* Slightly adjust padding */
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

h1, h2, h3 {
    color: #5a0a0a; /* Dark red theme */
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.section {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #eaeaea;
    border: 1px solid #ddd;
    border-radius: 4px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

select, input, button {
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box; /* Include padding and border in element's total width/height */
}

select {
    width: 100%;
}

button {
    cursor: pointer;
    background-color: #5a0a0a;
    color: white;
    border: none;
    margin-left: 5px;
    font-size: 0.9em;
    padding: 3px 6px;
    vertical-align: middle; /* Helps alignment */
}

button:hover {
    background-color: #8a1a1a;
}

button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#xpTracker {
    font-weight: bold;
    background-color: #d4edda; /* Light green */
    border-color: #c3e6cb;
    color: #155724;
    text-align: center; /* Center text for better mobile view */
}

.info-box {
    background-color: #f8f9fa;
    border: 1px dashed #ccc;
}

.info-box p {
    margin: 5px 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns by default */
    gap: 20px;
}

.stats-column ul {
    list-style: none;
    padding: 0;
}

.stats-column li {
    margin-bottom: 8px;
    display: flex; /* Use flexbox for alignment */
    justify-content: space-between; /* Pushes elements apart */
    align-items: center; /* Vertically align items */
    padding: 5px 8px;
    background-color: #fff;
    border: 1px solid #eee;
}

.stat-name {
    font-weight: bold;
    flex-grow: 1; /* Allows name to take up space */
    margin-right: 10px; /* Space between name and value/buttons */
}

.stat-value {
    font-weight: bold;
    min-width: 20px;
    text-align: center;
    margin-right: 10px; /* Space before buttons */
}

/* NEW Base style for button container */
.stat-controls {
    display: flex; /* Keep buttons side-by-side */
    align-items: center;
    justify-content: flex-end; /* Align buttons to the right */
    min-width: 65px; /* Give buttons minimum space */
    flex-shrink: 0; /* Prevent this div from shrinking */
}

.stat-controls button {
    margin-left: 3px; /* Slightly reduce space between buttons */
}


.note {
    font-size: 0.85em;
    font-style: italic;
    color: #666;
}

#outputArea {
    white-space: pre-wrap;
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    min-height: 100px;
    font-family: monospace;
    font-size: 0.9em; /* Slightly smaller for potentially more content */
}


/* --- RESPONSIVE STYLES --- */
@media (max-width: 700px) {
    body {
        padding: 5px; /* Reduce padding on small screens */
    }

    .container {
        padding: 10px;
    }

    h1 {
        font-size: 1.6em; /* Adjust heading size */
    }
    h2 {
        font-size: 1.3em;
    }

    .stats-grid {
        grid-template-columns: 1fr; /* Stack to a single column */
        gap: 15px;
    }

    .stats-column h3 {
        margin-top: 15px; /* Add space above Skills heading when stacked */
    }
    .stats-column:first-child h3 {
        margin-top: 0; /* No extra top margin for Attributes heading */
    }

    .stats-column li {
        padding: 4px 6px; /* Slightly reduce padding in list items */
    }

     /* Ensure buttons don't get too big/small */
    .stat-controls button {
       padding: 3px 5px;
       font-size: 0.85em;
    }

    #xpTracker {
        font-size: 0.9em; /* Make XP tracker slightly smaller */
    }
}

@media (max-width: 400px) {
     h1 {
         font-size: 1.4em;
     }
      h2 {
        font-size: 1.2em;
    }
     /* Further adjustments for very small screens if needed */
      .stats-column li {
        /* Potentially allow wrapping if absolutely necessary,
           though the min-width on controls should help */
        /* flex-wrap: wrap; */
    }
}