/* 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: HYPER PINK GAMER */
:root {
    --kawaii-pink: #ff69b4;
    --kawaii-dark: #ff1493;
    --kawaii-bg: #fff0f5;
    --kawaii-text: #ffffff;
    --font-stack: 'Verdana', sans-serif; /* Ideally 'Varela Round' or 'Quicksand' */
}

.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(--kawaii-bg);
    border: 3px solid var(--kawaii-pink);
    border-radius: 25px; /* Maximum roundness */
    padding: 20px;
    font-family: var(--font-stack);
    color: #444; /* Dark gray text for readability on light BG */
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}

.char-name {
    transform: none;
    margin-top: 0;
    color: var(--kawaii-dark);
    text-align: center;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
    border: none;
}

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

.action-btn {
    clip-path: none;
    flex: 1 0 auto;
    background: var(--kawaii-pink);
    color: #fff;
    border: none;
    border-radius: 50px; /* Pill shape */
    padding: 10px 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--kawaii-dark); /* chunky cute button shadow */
    transition: 0.1s;
}

.action-btn:hover {
    transform: translateY(2px);
    box-shadow: 0 2px 0 var(--kawaii-dark);
}

/* 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: #fff;
    border: 2px solid var(--kawaii-pink);
    color: var(--kawaii-dark);
    font-family: var(--font-stack);
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 15px;
}
.theme-input:focus { outline: none; box-shadow: 0 0 10px var(--kawaii-pink); }

/* BARS */
.bar-bg { transform: none; background: #ffe4e1; height: 12px; width: 100%; margin-bottom: 8px; border-radius: 10px; overflow: hidden;}
.hp-fill { height: 100%; background-color: #ff4757; }
.mp-fill { height: 100%; background-color: #1e90ff; }
.stats-row { display: flex; gap: 10px; width: 100%; margin: 10px 0; }
.stat-box { flex: 1; text-align: center; }