/* =========================
   Global layout
   ========================= */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    background: #111;
    color: #eee;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    line-height: 1.2;
}

* {
    box-sizing: border-box;
}

/* =========================
   Controls
   ========================= */

button {
    font-size: 14px;
    background: #222;
    color: #eee;
}

.button {
    border: 1px solid #555;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

select {
    font-size: 14px;
    padding: 6px 4px;
    background: #222;
    color: #eee;
    border-radius: 4px;
    margin-bottom: 10px;
}

/* =========================
   Utility
   ========================= */

.hidden {
    display: none;
}

.section {
    margin-bottom: 20px;
}

/* =========================
   Cards
   ========================= */

.card {
    border: 2px solid #555;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    background: #1a1a1a;
}

.card h3 {
    margin-top: 0;
}

/* Card headings */
#characterCard h3 { color: #64B5F6; }
#combatCard h3    { color: #FF7043; }
#shopUI h3        { color: #4caf50; }
#startMenu h2     { color: #b1c1ca; }
#saveLoadCard h3  { color: #FFD54F; }

/* =========================
   Bars / meters
   ========================= */

.bar-bg {
    width: 200px;
    height: 14px;
    background: #333;
    border: 1px solid #555;
    margin: 4px 0;
    border-radius: 4px;
}

.bar-fill {
    height: 100%;
    width: 0%;
    background: #4caf50;
    border-radius: 4px;
}

.bar-bg.hp   { background: #400; }
.bar-fill.hp { background: #e53935; }

/* =========================
   Equipment
   ========================= */

.equip-box {
    width: 100%;
    max-width: 300px;
    padding: 6px;
    border: 1px solid #666;
    background: #222;
    margin-bottom: 4px;
    border-radius: 4px;
    overflow-x: hidden;
}

/* =========================
   Combat layout (CRITICAL)
   ========================= */

/* Fixed-size combat card */
#combatCard {
    height: 600px;
    display: flex;
    flex-direction: column;
}

/* Combat content column */
#combatUI {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: flex-start;
}



/* Footer locked to bottom */
.combat-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}

.spell-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
}