/* 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: ART DECO */
:root {
    --deco-gold: #d4af37;
    --deco-black: #121212;
    --deco-cream: #f5f5dc;
    --font-stack: 'Georgia', serif; /* Ideally a font like 'Playfair Display' */
}

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

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

    /* STYLE */
    background-color: var(--deco-black);
    color: var(--deco-gold);
    /* The "Double" border creates that classic frame look */
    border: 4px double var(--deco-gold); 
    padding: 20px;
    font-family: var(--font-stack);
    outline: 1px solid var(--deco-gold); /* Extra fine outer line */
    outline-offset: 4px;
}

.char-name {
    transform: none;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: normal;
    letter-spacing: 4px; /* Wide spacing is very Deco */
    border-bottom: 1px solid var(--deco-gold);
    text-align: center;
    padding-bottom: 10px;
}

.actions {
    transform: none;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.action-btn {
    clip-path: none;
    border-radius: 0;
    flex: 1 0 40%;
    background: transparent;
    color: var(--deco-gold);
    border: 1px solid var(--deco-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.action-btn:hover {
    background: var(--deco-gold);
    color: var(--deco-black);
}

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

.theme-input {
    background: #1a1a1a;
    border: 1px solid #555;
    border-bottom: 2px solid var(--deco-gold);
    color: var(--deco-cream);
    font-family: var(--font-stack);
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
}
.theme-input:focus { outline: 1px solid var(--deco-gold); }

/* BARS */
.bar-bg { transform: none; background: #333; height: 10px; border: 1px solid var(--deco-gold); width: 100%; margin-bottom: 8px; border-radius: 0;}
.hp-fill { height: 100%; background-color: #8b0000; }
.mp-fill { height: 100%; background-color: #104e8b; }
.stats-row { display: flex; gap: 10px; width: 100%; margin: 10px 0; }
.stat-box { flex: 1; text-align: center; }