/* THEME: SOFT RESET / BASE */
/* Load this BEFORE your specific theme, or keep it active in the background. */

/* 1. CONTAINER DEFAULTS */
.character-card {
    /* Reset geometric distortions */
    transform: none;
    clip-path: none;
    mask: none;
    
    /* Reset visual effects */
    backdrop-filter: none;
    box-shadow: none;
    background-image: none;
    
    /* Reset borders and spacing */
    border-radius: 0;
    margin: 0;
    
    /* Set a safe fallback background (so it's not invisible if a theme fails) */
    background-color: #ffffff; 
    color: #000000;
    
    /* Typography defaults */
    font-family: sans-serif;
    letter-spacing: normal;
    text-shadow: none;
}

/* 2. HEADER DEFAULTS */
.char-name {
    transform: none;
    text-shadow: none;
    letter-spacing: normal;
    text-transform: none;
    border: none;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    margin-top: 0;
}

/* 3. BUTTON DEFAULTS */
.actions {
    transform: none;
    gap: 5px;
    border: none;
}

.action-btn {
    transform: none;
    clip-path: none;
    box-shadow: none;
    border-radius: 0;
    
    /* Neutral button styling */
    background-color: #f0f0f0; 
    color: #000;
    border: 1px solid #999;
    
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
}

/* 4. INPUT DEFAULTS */
.form-grid {
    transform: none;
}

.theme-input {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    color: #000;
    width: 100%;
}

/* 5. BAR DEFAULTS */
.bar-bg {
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background-color: #e0e0e0;
    border: 1px solid #000;
    height: 10px;
}

.hp-fill, .mp-fill {
    box-shadow: none;
    background-image: none;
}/* THEME: WOODLAND DRUID */
:root {
    --druid-green: #3a5f0b;
    --druid-brown: #4e342e;
    --druid-parchment: #e8f5e9;
    --druid-border: #2e7d32;
    --font-stack: 'Times New Roman', serif;
}

.character-card {
    /* RESET RULES */
    transform: none;
    clip-path: none;
    backdrop-filter: none;
    text-shadow: none;
    margin: 0;

    /* LAYOUT */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-y: auto;

    /* STYLE */
    background-color: var(--druid-parchment);
    color: var(--druid-brown);
    border: 3px solid var(--druid-border);
    /* Asymmetrical "organic" corners */
    border-radius: 2px 20px 2px 20px;
    padding: 20px;
    font-family: var(--font-stack);
    box-shadow: inset 0 0 20px rgba(58, 95, 11, 0.1);
}

.char-name {
    transform: none;
    margin-top: 0;
    color: var(--druid-green);
    font-style: italic;
    border-bottom: 2px dashed var(--druid-green);
    padding-bottom: 5px;
}

.actions {
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

.action-btn {
    clip-path: none;
    flex: 1 0 auto;
    background: var(--druid-brown);
    color: #fff;
    border: none;
    /* Leaf shape buttons */
    border-radius: 10px 0 10px 0;
    padding: 10px 15px;
    cursor: pointer;
    font-family: var(--font-stack);
}

.action-btn:hover {
    background: var(--druid-green);
    border-radius: 0 10px 0 10px; /* Shape shifts on hover */
}

/* FORM INPUTS */
.form-grid { display: flex; flex-wrap: wrap; gap: 10px; transform: none; }
.input-group { flex: 1 1 45%; }
.full-width { flex: 1 1 100%; }

.theme-input {
    background: rgba(255,255,255,0.5);
    border: 1px solid var(--druid-green);
    color: var(--druid-brown);
    font-family: var(--font-stack);
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
}
.theme-input:focus { background: #fff; border-color: var(--druid-brown); outline: none; }

/* BARS */
.bar-bg { transform: none; background: #c8e6c9; height: 10px; width: 100%; margin-bottom: 8px; border-radius: 5px; border: 1px solid var(--druid-green);}
.hp-fill { height: 100%; background-color: #d32f2f; }
.mp-fill { height: 100%; background-color: #1976d2; }
.stats-row { display: flex; gap: 10px; width: 100%; margin: 10px 0; }
.stat-box { flex: 1; text-align: center; }