/*
 * Copyright (c) 2025 Gabriel Brandmayr
 * Incremental Healer - Stylesheet
 * All rights reserved.
 */

/* --- Base Styles --- */
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
body {
    font-family: 'Courier New', Courier, monospace; background-color: #283628; color: #e0e0d8;
    display: flex; justify-content: center; align-items: flex-start; padding: 10px 5px; margin: 0;
    image-rendering: pixelated; image-rendering: crisp-edges; -webkit-font-smoothing: none; font-smooth: never;
    min-height: 100vh; font-size: 14px; -webkit-tap-highlight-color: transparent;
}
#game-container { /* Also referenced by .landing-container in index.html */
    border: 2px solid #000; background-color: #5a4d41; padding: 10px; box-shadow: 3px 3px 0px #000;
    width: 100%; max-width: 600px; margin: 0 auto; position: relative;
}

/* Dim game when paused */
#game-container.paused > *:not(#top-right-controls):not(#start-screen):not(#upgrade-phase-banner) {
    filter: brightness(0.6);
    pointer-events: none;
}

h1, h2 { text-align: center; color: #b2d8b2; text-shadow: 1px 1px 0px #000; margin: 0 0 10px 0; }
h1 { font-size: 1.2em; }
h2 { font-size: 1.1em; margin-bottom: 8px; color: #98c379; }

/* --- Start Screen / Upgrade Banner --- */
#start-screen { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(40, 54, 40, 0.95); z-index: 200; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 20px; border: 2px solid #000; }
#start-screen h1 { font-size: 1.8em; color: #b2d8b2; margin-bottom: 15px; text-shadow: 2px 2px 0 #000; }
#start-screen p { font-size: 1.0em; color: #d8c8b8; margin-bottom: 25px; max-width: 80%; }
#start-game-btn { padding: 12px 25px; font-size: 1.3em; background-color: #5cb85c; color: white; border: 3px solid #000; box-shadow: 3px 3px 0 #000; cursor: pointer; }
#start-game-btn:active { background-color: #4a9a4a; box-shadow: 1px 1px 0 #000; transform: translate(2px, 2px); }
/* Upgrade Banner - Only shown post-run */
#upgrade-phase-banner { display: none; position: relative; background-color: #4a5d4a; color: #e0e0d8; padding: 10px; margin: -10px -10px 15px -10px; border-bottom: 2px solid #000; text-align: center; z-index: 100; }
#upgrade-phase-banner h2 { font-size: 1.3em; margin-bottom: 5px; text-shadow: 1px 1px 0 #000; color: #b2d8b2; }
#upgrade-phase-banner p { font-size: 0.9em; margin-bottom: 10px; color: #c8b8a8; }
#continue-game-btn { padding: 6px 15px; font-size: 1.0em; background-color: #6f9a6f; color: white; border: 2px solid #000; box-shadow: 2px 2px 0 #000; cursor: pointer; }
#continue-game-btn:active { background-color: #7a6d5b; box-shadow: 1px 1px 0 #000; transform: translate(1px, 1px); }

/* --- Top Right Controls (Menu, Mute, Pause) --- */
#top-right-controls {
    position: absolute; top: 8px; right: 8px; z-index: 150; display: flex; gap: 5px;
}
.top-control-button {
    padding: 4px 8px; font-size: 0.8em; background-color: #8b4513; color: white;
    border: 2px solid #000; box-shadow: 2px 2px 0 #000; min-width: 60px; text-align: center;
    cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
    text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Courier New', Courier, monospace; line-height: 1.2;
}
.top-control-button:active:not(:disabled) {
    background-color: #7a3503; box-shadow: 1px 1px 0 #000; transform: translate(1px, 1px);
}
#pause-button:disabled {
     background-color: #7a6854 !important; color: #a0a098 !important; cursor: not-allowed;
     box-shadow: 1px 1px 0px #4a413a !important; transform: translate(1px, 1px) !important;
}
#mute-button.muted {
   background-color: #a0522d;
}

/* --- Enemy Area --- */
#enemy-area { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; padding: 8px; background-color: #4a413a; border: 1px solid #111; box-shadow: inset 1px 1px 0px #222; min-height: 100px; }
.enemy { border: 2px solid #000; padding: 8px; text-align: center; background-color: #7d7165; position: relative; box-shadow: 2px 2px 0px #111; min-width: 120px; display: flex; flex-direction: column; align-items: center; }
.enemy.dead { opacity: 0.6; }
.enemy-sprite { width: 40px; height: 40px; margin: 4px auto; border: 1px solid #000; box-shadow: 1px 1px 0px #000; background-color: #c0392b; flex-shrink: 0; }
.enemy-health-bar-container { width: 90px; height: 10px; background-color: #5e1e1e; border: 1px solid #000; margin: 6px auto 4px auto; box-shadow: inset 1px 1px 0px #333; overflow: hidden; flex-shrink: 0; }
.enemy-health-bar { height: 100%; background-color: #e74c3c; width: 100%; transition: width 0.2s linear; box-shadow: inset -1px -1px 0px rgba(0,0,0,0.4); }

/* --- Puzzle Area --- */
#puzzle-area { margin-bottom: 15px; padding: 10px; background-color: #4f5a4f; border: 1px solid #222; box-shadow: inset 1px 1px 0px #333; text-align: center; }
#puzzle-area h2 { font-size: 1.0em; margin-bottom: 8px; color: #b2d8b2; }
#puzzle-content { margin-bottom: 8px; min-height: 40px; font-size: 0.9em; line-height: 1.4; }
#math-problem { font-weight: bold; color: #e0e0d8; display: inline-block; min-width: 80px; margin-right: 5px; }
#puzzle-answer { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; width: 60px; padding: 3px 5px; border: 1px solid #000; background-color: #d8d0c8; color: #333; margin: 0 5px; text-align: center; -moz-appearance: textfield; appearance: none; }
#puzzle-answer::-webkit-outer-spin-button, #puzzle-answer::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#puzzle-area button#submit-puzzle { padding: 3px 8px; font-size: 0.85em; margin-left: 5px; min-height: 28px; }
#puzzle-status { font-size: 0.8em; color: #a8b8a8; min-height: 1.2em; }
#puzzle-content.hidden { display: none; }

/* --- Party Area --- */
#party-area { display: flex; justify-content: space-around; margin-bottom: 15px; padding: 8px; background-color: #6a5d51; border: 1px solid #222; box-shadow: inset 1px 1px 0px #333; gap: 8px; min-height: 100px; position: relative; /* Added for notification positioning */ }
.party-member { border: 2px solid #000; padding: 8px 5px; text-align: center; background-color: #7a6d61; position: relative; cursor: pointer; box-shadow: 1px 1px 0px #222; transition: border-color 0.2s, box-shadow 0.2s; min-width: 75px; flex: 1; display: flex; flex-direction: column; align-items: center; user-select: none; }
.party-member.selected { border-color: #ff0; box-shadow: 1px 1px 0px #cc0; }
.party-member.dead .sprite { filter: grayscale(100%); background-color: #504840 !important; border-color: #444; }
.party-member.dead .status { color: #ff4d4d; }
.party-member.dead .health-bar-container { background-color: #555; }
.sprite { width: 30px; height: 30px; margin: 4px auto; border: 1px solid #000; box-shadow: 1px 1px 0px #000; position: relative; flex-shrink: 0; }
/* Member sprite colors applied via JS */
.hot-indicator { position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background-color: rgba(139, 195, 74, 0.9); border: 1px solid #000; border-radius: 50%; box-shadow: 1px 1px 0px #000; display: none; }
.party-member.has-hot .hot-indicator { display: block; }
.health-bar-container { width: 60px; height: 8px; background-color: #a04040; border: 1px solid #000; margin: 5px auto 3px auto; box-shadow: inset 1px 1px 0px #555; overflow: hidden; flex-shrink: 0; }
.health-bar { height: 100%; background-color: #40a040; width: 100%; transition: width 0.3s linear; box-shadow: inset -1px -1px 0px rgba(0,0,0,0.2); }
.party-member.dead .health-bar { width: 0 !important; background-color: transparent !important; }
.status { font-size: 0.75em; margin-top: 2px; line-height: 1.1; color: #d8c8b8; }
.hp-status { font-size: 0.7em; color: #d8c8b8; }

/* --- Action Bar --- */
#action-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; background-color: #554a3f; padding: 8px; border: 1px solid #222; box-shadow: inset 1px 1px 0px #333; }
#target-info, #mana-display, #faith-display { font-weight: bold; background-color: #443a31; padding: 4px 6px; border: 1px solid #222; box-shadow: inset 1px 1px 0px #333; text-align: center; flex-grow: 1; flex-basis: 25%; font-size: 0.8em; margin: 2px; white-space: nowrap; user-select: none; }
#target-info { flex-basis: 40%; color: #e0e0d8; }
#mana-display { color: #a0d8a0; }
#faith-display { color: #fadf98; }
#action-bar button { flex-grow: 1; flex-basis: 45%; font-size: 0.9em; padding: 8px 5px; margin: 2px; min-height: 36px; }
.mana-cost { color: #c0ecc0; font-weight: normal; }
/* Style for boosted mana display */
#mana-display.boosted {
    color: #a0d8ff; /* Brighter blue/cyan */
    text-shadow: 0 0 3px #6495ED;
}


/* --- Base Button Style (Applies to most buttons) --- */
button {
    font-family: 'Courier New', Courier, monospace; padding: 6px 10px; border: 2px solid #000;
    background-color: #5cb85c; /* Default green */ color: #fff; cursor: pointer; box-shadow: 2px 2px 0px #000;
    transition: none; font-size: 0.9em; text-align: center; line-height: 1.2; user-select: none;
}
button:active:not(:disabled) {
    background-color: #4a9a4a; box-shadow: 1px 1px 0px #000; transform: translate(1px, 1px);
}
button:disabled {
    background-color: #7a8a7a !important; color: #a0a098 !important; cursor: not-allowed;
    box-shadow: 1px 1px 0px #4a413a !important; transform: translate(1px, 1px) !important;
}
button.no-mana:disabled { color: #b0b0a8 !important; }

/* --- Upgrades Area --- */
#upgrades-area { margin-top: 15px; padding: 8px; background-color: #4f453c; border: 1px solid #222; box-shadow: inset 1px 1px 0px #333; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
#upgrades-area h2 { width: 100%; margin-bottom: 5px; font-size: 1.0em; color: #b2d8b2; }
#upgrades-area button { display: block; flex-basis: calc(50% - 10px); min-width: 120px; margin: 3px; padding: 4px; line-height: 1.2; font-size: 0.75em; min-height: 34px; background-color: #6f9a6f; color: #fff; border: 2px solid #000; box-shadow: 2px 2px 0px #000; font-weight: bold; }
#upgrades-area button:active:not(:disabled) { background-color: #5f8a5f; transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
#upgrades-area button:disabled { background-color: #6a7a6a !important; color: #999 !important; font-weight: bold; box-shadow: 1px 1px 0px #4a413a !important; transform: translate(1px, 1px) !important; }
.cost { font-weight: bold; color: #fadf98; }

/* --- Delete Save Control --- */
.save-controls {
    margin-top: 15px;
    padding: 8px;
    text-align: center;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center buttons */
    gap: 10px; /* Space between buttons */
    flex-wrap: wrap; /* Allow wrapping */
}
.control-button { /* Inherits base button styles */
    padding: 6px 12px;
    font-size: 0.9em;
    /* Specific colors handled by classes */
}
/* Styles for #save-game-btn removed */
.control-button.danger {
    background-color: #c0392b; /* Red */
}
.control-button.danger:active:not(:disabled) {
    background-color: #a03020; /* Darker Red */
}

/* --- Floating Numbers --- */
#floating-numbers-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 50; }
.floating-number { position: absolute; font-size: 1.0em; font-weight: bold; text-shadow: 1px 1px 0px #000; animation: floatUp 1.5s ease-out forwards; white-space: nowrap; z-index: 51; }
.floating-number.damage { color: #ff4d4d; } .floating-number.heal { color: #4dff4d; } .floating-number.mana { color: #a0d8a0; } .floating-number.faith { color: #fadf98; }
.floating-number.system { color: #f0f0f0; } /* System message type */
@keyframes floatUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-35px); } }

/* --- Upgrade Notification Text --- */
.upgrade-notification {
    position: absolute;
    bottom: 105%; /* Position slightly above the party area */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background-color: rgba(40, 54, 40, 0.85); /* Dark, semi-transparent background */
    color: #fadf98; /* Bright color (like Faith) for visibility */
    padding: 4px 8px;
    border-radius: 3px;
    border: 1px solid #fadf98; /* Subtle border */
    font-size: 0.9em; /* Adjust as needed */
    font-weight: bold;
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
    z-index: 55; /* Above party members, potentially below floating numbers */
    opacity: 0; /* Start hidden */
    transition: opacity 0.4s ease-out; /* Smooth fade in/out */
    pointer-events: none; /* Prevent interaction */
    visibility: hidden; /* Use visibility for better performance */
}
.upgrade-notification.visible {
    opacity: 1;
    visibility: visible;
}

/* --- Temporary Ability Buttons & Effects --- */
.temporary-ability {
    background-color: #6c757d; /* A neutral grey */
    color: white;
    border: 1px solid #5a6268;
}
.temporary-ability:hover:not(:disabled) {
    background-color: #5a6268;
}
.temporary-ability:disabled {
    background-color: #adb5bd !important; /* Override base disabled style */
    color: #6c757d !important;
}
/* Style for shielded party members */
.party-member.shielded {
    box-shadow: 0 0 0 3px rgba(100, 150, 255, 0.7), 1px 1px 0px #222; /* Blue glow + original shadow */
    border-color: #6495ED; /* Light blue border */
}
/* Shake animation (used for feedback) */
.shake {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}

/* ============ MOBILE OPTIMIZATIONS ============ */
@media (max-width: 600px) {
    body { font-size: 13px; padding: 5px; } #game-container { padding: 8px; box-shadow: 2px 2px 0px #000; }
    h1 { font-size: 1.1em; margin-bottom: 8px;} h2 { font-size: 1.0em; margin-bottom: 5px;}
    #upgrade-phase-banner h2 { font-size: 1.2em; } #upgrade-phase-banner p { font-size: 0.85em; } #continue-game-btn { font-size: 1.0em; padding: 5px 12px; }
    #party-area { flex-direction: column; align-items: center; gap: 6px; padding: 6px; }
    .party-member { flex-basis: auto; width: 80%; max-width: 250px; padding: 6px; box-shadow: 1px 1px 0px #222; }
    .sprite { width: 28px; height: 28px; margin: 3px auto;}
    .health-bar-container { width: 70px; height: 7px; margin: 4px auto 2px auto; }
    .status { font-size: 0.7em;} .hp-status { font-size: 0.65em; }
    #action-bar { padding: 6px; gap: 4px;}
    #target-info { flex-basis: 100%; order: -1; margin-bottom: 4px;}
    #mana-display, #faith-display { flex-basis: 48%; font-size: 0.75em; padding: 3px 5px; }
    #action-bar button { flex-basis: 48%; padding: 6px 4px; font-size: 0.85em; min-height: 34px; }
    #upgrades-area { padding: 6px; gap: 4px;}
    #upgrades-area button { flex-basis: calc(50% - 8px); min-width: 100px; padding: 3px; font-size: 0.7em; line-height: 1.1; min-height: 32px; }
    #puzzle-area { padding: 8px; } #puzzle-area h2 { font-size: 0.9em; } #puzzle-content { font-size: 0.8em; } #math-problem { min-width: 60px; } #puzzle-answer { width: 50px; } #puzzle-area button#submit-puzzle { font-size: 0.8em; } #puzzle-status { font-size: 0.75em; }
    .floating-number { font-size: 0.9em; } @keyframes floatUp { 100% { opacity: 0; transform: translateY(-30px); } }
    .save-controls { margin-top: 10px; padding: 5px; }
    .upgrade-notification { /* Mobile adjustment */
        font-size: 0.8em;
        padding: 3px 6px;
        /* 'bottom: 105%' should still work fine in column layout */
    }
}
@media (max-width: 400px) {
    body { font-size: 12px; } h1 { font-size: 1.0em; } #game-container { padding: 5px; }
    .enemy-sprite { width: 35px; height: 35px; } .enemy-health-bar-container { width: 80px; }
    .party-member { width: 90%; } .sprite { width: 25px; height: 25px; } .health-bar-container { width: 60px; }
    #action-bar button { font-size: 0.8em; min-height: 32px;} #mana-display, #faith-display { font-size: 0.7em; }
    #upgrades-area button { flex-basis: calc(100% - 8px); font-size: 0.75em; }
    #puzzle-content { display: flex; flex-direction: column; align-items: center; gap: 5px;} #puzzle-answer { margin: 0; } #puzzle-area button#submit-puzzle { margin-left: 0; width: 80px; }
    .save-controls { gap: 8px; }
    .control-button { font-size: 0.85em; padding: 5px 10px; }
     /* Adjust top right controls on very small screens */
     #top-right-controls { gap: 3px; }
     .top-control-button { min-width: 50px; padding: 3px 6px; font-size: 0.75em;}
}

/* Shake animation */
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }