button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

body {
 background-color: #1c0124;;
 text-transform: uppercase;
}

body button {
    color: black;
    background-color: #967ba6;
}

#nextTurnBtn {
    padding: 25px;
}

.layout-row {
    display: flex;            /* Enables the horizontal layout */
    width: 100%;
    gap: 10px;               /* Even spacing between the boxes */
    align-items: stretch;    /* Makes all boxes the same height */
    justify-content: space-between; /* Spreads them out evenly */
    margin: 5px;
}

.layout-row-one {
    height: 280px;
    font-size: 14px;
}

.layout-row-two {
    border: 2px solid #481f54;
    background-color: #967ba6;
}

.layout-row-three {
    height: 310px;
    font-size: 12px;
}

.layout-row-first-child {
    display: block;          /* Changed from flex to block for stability */
    height: 100%;
    width: 240px;
    padding: 1vw;
    border: 2px solid #481f54;
    background-color: #967ba6;
    box-sizing: border-box;
    overflow: hidden;
}

.layout-row-bars {
    display: block;          /* Changed from flex to block for stability */
    height: 100%;
    width: 100%;
    padding: 1vw;
    border: 2px solid #481f54;
    background-color: #967ba6;
    box-sizing: border-box;
    overflow: hidden;
}

./* Force the table to respect column widths */
 .stat-table-bars {
     display: table;
     width: 100%;
     height: 100%;
     table-layout: fixed;    /* This is key! */
     border-collapse: collapse;
     border: 10px solid black;
 }

.stat-table-bars td:nth-child(1) {
    width: 80px;             /* Enough for "PASSIVE PERCEPTION" later */
    text-align: left;
    font-weight: bold;
}

.stat-table-bars td:nth-child(2) {
    width: 80px;             /* Enough for "120000 / 140000" */
    text-align: center;
}

.stat-table-bars td:nth-child(3) {
    width: 850px;             /* The rest for the bar */
}

.stat-table-bars td {
    padding: 2px 4px;       /* Tighten padding since the height is now forced */
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
}

#hpBar, #tempHpBar, #xpBar td {
    height: 35px;
}

.stats-display {
    display: flex;
    width: 100%;
    height: 40px; /* Use PX for height to keep it stable */
    border: 2px solid #481f54;
    background-color: #967ba6;
    box-sizing: border-box;
    overflow: hidden;
}

/* 1. HEROIC BOX: Fixed width so it stays on the left */
#liveStatsDisplay .stat-row {
    flex: 0 0 100px;         /* It will ALWAYS be 100px wide */
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid #481f54;
    font-size: 10px;
    padding: 0 5px;
    text-align: center;
}

/* 2. BUTTON HOLDER: Takes up all the remaining space on the right */
.button-container {
    flex: 1;                 /* Takes 100% of whatever is left */
    display: flex;
    min-width: 0;            /* Crucial: allows it to shrink */
}

/* 3. INPUT: Slightly wider than buttons */
#valueInput {
    flex: 2;                 /* Takes twice as much space as a button */
    width: 0;                /* Forces flex-basis to take over */
    min-width: 0;
    background-color: white;
    text-align: center;
    border: none;
    border-right: 2px solid #481f54;
}

/* 4. BUTTONS: All share the remaining space equally */
.bar-button:not(input) {
    flex: 1;                 /* All buttons get 1 share of space */
    width: 0;                /* Forces flex-basis to take over */
    min-width: 0;
    height: 100%;
    background-color: #967ba6;
    border: none;
    border-right: 2px solid #481f54;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
}

.bar-button:last-child {
    border-right: none;
}

/* Force the table to respect column widths */
.stat-table {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed;    /* This is key! */
    border-collapse: collapse;
}

/* Specific column widths to prevent overlapping */
.stat-table td:nth-child(1) {
    text-align: left;
    font-weight: bold;
}

.stat-table td:nth-child(2) {
    text-align: right;
}

.stat-table td:nth-child(3) {
    width: 20%;             /* Give the number (+2, +1) the rest */
    text-align: right;
}

.stat-table td {
    padding: 2px 4px;       /* Tighten padding since the height is now forced */
    border-bottom: 1px solid #ccc;
    vertical-align: middle;
}



.name-row {
    text-align: center;
}

.bar-container {
    height: 20px;
    background: #333;
    border: 1px solid #000;
    position: relative;
}

.bar-fill {
    height: 100%;
}

.hp-fill { background: #730204; }
.temp-fill { background: #024673; }
.temp-overfill { background: lightblue; opacity: 0.7; }
.xp-fill { background: #736202; }

/* MONEY */
#gp-input {
    width: 20px;
}

.gp-controls {
    display: flex;
    margin-top: 4px;
}

.gp-controls button,
.gp-controls input {
    border: 1px solid #aaa;
    padding: 4px 8px;
}

/* Remove spacing between elements */
.gp-controls button,
.gp-controls input {
    margin: 0;
}

.money-sprite {
    width: 45px !important;
        width: auto;
        object-fit: contain; /* keeps proportions */
  }

.money-type {
    margin: 0px;
}

.money-top {
    border: 1px solid black;
    height: 1.5vw;
    overflow: hidden;
}

.money {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50%;        /* ← adjust until it feels right */
    line-height: 2.5vw;
    color: white;
    box-sizing: border-box;
    border-left: 1px solid black;
    border-right: 1px solid black;
    padding-left: 10%;
    padding-right: 10%;
}

.money-btn {
    all: unset; /* wipes ALL default button styles */
    display: inline-flex; /* makes it behave like a button again */
    justify-content: center; /* centers the text */
    align-items: center;
    border-radius: 0;
    width: 25%;

    padding: 0;          /* remove default padding */
    line-height: 2.5vw;  /* match the height exactly */
    box-sizing: border-box;
}


.money-box {
    width: 100%;
    display: flex;
    flex-direction: row;   /* ← horizontal */
    align-items: center;
}

.money-top {
    display: flex;
    align-items: center;

}

.money-input {
    all: unset; /* wipes ALL default button styles */
    display: inline-flex; /* makes it behave like a button again */
    justify-content: center; /* centers the text */

    width: 60px;
    text-align: center;
    padding: 0;
    border: 1px solid black;
    border-radius: 0;
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.effects-cont {
    display: flex;
    flex-wrap: wrap;
    gap: 5px; /* Use gap instead of margin-left for cleaner spacing */
    display: inline-block;
    width: 100%;
    height: 35px;
}

.effects-span {
    border: 1px solid black;
    border-radius: 5px;
    padding: 4px;
    margin-left: 2px;
    float: left;
}

/* 1. The Master Control */
.status-badge {
    /* Change the 0.4 below to any number between 0 and 1 to adjust ALL opacities at once */
    background-color: rgba(var(--badge-color), 0.4);

    /* This makes the border solid and slightly brighter than the background */
    border: 1px solid rgb(var(--badge-color));
    float: left;
    margin-left: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    color: white; /* Text stays 100% solid */
    font-weight: bold;
    font-size: 12px;
    display: inline-block;
}

/* 2. Buffs & Utility (Defining the RGB numbers only) */
.bane { --badge-color: 126, 34, 206; }
.hidden { --badge-color: 67, 56, 202; }
.raging { --badge-color: 153, 27, 27; }
.blessed { --badge-color: 180, 83, 9; }
.dodging { --badge-color: 29, 78, 216; }
.inspired { --badge-color: 217, 119, 6; }
.concentrating { --badge-color: 255, 215, 0; }

/* 3. Exhaustion Levels */
.level_1, .level_2 { --badge-color: 249, 115, 22; }
.level_3, .level_4 { --badge-color: 234, 88, 12; }
.level_5, .level_6 { --badge-color: 154, 52, 18; }

/* 4. Conditions & CC */
.prone { --badge-color: 120, 53, 15; }
.blinded { --badge-color: 55, 65, 81; }
.charmed { --badge-color: 190, 24, 93; }
.stunned { --badge-color: 30, 64, 175; }
.deafened { --badge-color: 75, 85, 99; }
.grappled { --badge-color: 194, 65, 12; }
.poisoned { --badge-color: 21, 128, 61; }
.invisible { --badge-color: 99, 102, 241; }
.paralyzed { --badge-color: 37, 99, 235; }
.petrified { --badge-color: 87, 83, 78; }
.frightened { --badge-color: 161, 98, 7; }
.restrained { --badge-color: 146, 64, 14; }
.unconscious { --badge-color: 0, 0, 0; }
.incapacitated { --badge-color: 17, 24, 39; }

.bg-gray { --badge-color: 107, 114, 128; }

/* The Golden Glow Class */
.concentration-active {
    box-shadow: 0 0 15px 5px rgba(255, 215, 0, 0.6); /* Golden aura */
    border: 2px solid gold !important;
    transition: all 0.5s ease-in-out;
    animation: pulse-gold 2s infinite;
}

/* Optional: Pulse effect to make it feel "magical" */
@keyframes pulse-gold {
    0% { box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.4); }
    50% { box-shadow: 0 0 20px 8px rgba(255, 215, 0, 0.7); }
    100% { box-shadow: 0 0 10px 2px rgba(255, 215, 0, 0.4); }
}