/* Plik: css/style.css */

body {
    margin: 0;
    overflow: hidden; /* Nadal ukrywaj paski przewijania */
    background-color: #222;
    min-height: 100vh; /* Nadal zapewnij pełną wysokość */
    font-family: Arial, sans-serif;
    /* Usunięto: display: flex; justify-content: center; align-items: center; */
    /* Dodano padding, aby canvas nie przylegał do góry, jeśli jest niski */
    padding-top: 20px; /* Możesz dostosować lub usunąć, jeśli wolisz */
    box-sizing: border-box; /* Uwzględnij padding w wysokości */
}

canvas {
    border: 1px solid #555;
    background-color: #333;
    cursor: crosshair;
    display: block;
    /* Dodano margin: 0 auto; do wyśrodkowania w poziomie */
    margin: 0 auto;
}

#upgradeModal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(40, 40, 40, 0.9);
    color: white;
    border: 2px solid #777;
    padding: 25px;
    border-radius: 10px;
    display: none;
    text-align: center;
    z-index: 9999;
    min-width: 300px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}

/* Skin preview layout inside the modal */
.skin-preview {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    flex-wrap: wrap;
}

.skin-canvas {
    width: 32px;
    height: 32px;
    image-rendering: pixelated; /* keep pixel art crisp when scaled */
    border-radius: 4px;
}

#upgradeOptionsContainer {
    max-height: 60vh;
    overflow: auto;
}

#upgradeModal h3 { margin-top: 0; color: lightgreen; }
.upgradeChoice { background-color: #555; border: 1px solid #888; padding: 15px; margin: 10px 0; border-radius: 5px; cursor: pointer; transition: background-color 0.2s, transform 0.1s; }
.upgradeChoice:hover { background-color: #666; }
.upgradeChoice p { margin: 5px 0 0 0; font-size: 0.9em; color: #ccc; }
.toggle-expert-on { border-color: lightgreen; background-color: #484; }
.toggle-expert-on:hover { background-color: #5a5; }
.toggle-expert-off { border-color: #888; background-color: #555; }
.toggle-expert-off:hover { background-color: #666; transform: scaleY(1.03); }

/* Style dla Menu Pauzy */
#pauseMenu {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* Centrowanie */
    background-color: rgba(40, 40, 40, 0.9); color: white; border: 2px solid #777;
    padding: 25px; border-radius: 10px; display: none; text-align: center;
    z-index: 10; min-width: 300px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
#pauseMenu h3 { margin-top: 0; color: orange; }
.volume-slider-container { margin: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#pauseMenu label { flex-shrink: 0; text-align: left; }
#pauseMenu input[type="range"] { flex-grow: 1; cursor: pointer; accent-color: orange; }
.volume-value { min-width: 45px; text-align: right; font-weight: bold; flex-shrink: 0; }
.resume-instruction { margin-top: 25px; font-size: 0.9em; color: #aaa; font-style: italic; }
.test-boss-button {
    display: inline-block; /* Lub block, jeśli mają być jeden pod drugim */
    margin: 15px 10px 5px 10px;
    padding: 8px 15px;
    cursor: pointer;
    background-color: #555; /* Dopasuj kolory */
    border: 1px solid #888;
    color: yellow; /* Kolor tekstu */
    border-radius: 4px;
    font-weight: bold;
}
.test-boss-button:hover {
    background-color: #666;
}