:root {
    --bg-color: #050505;
    --text-color: #bdc3c7;
    --accent-color: #8e44ad;
    --gold-color: #f1c40f;
}

body { 
    background: var(--bg-color); 
    color: var(--text-color); 
    font-family: 'Courier New', monospace;
    margin: 0; height: 100vh; 
    display: flex; flex-direction: column; overflow: hidden; 
    user-select: none; -webkit-user-select: none; touch-action: none;
}

/* --- UI PANEL --- */
#ui { 
    height: 85px; 
    background: #111; 
    border-bottom: 4px solid #333; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center;
    padding: 5px 0; 
    z-index: 10; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

.ui-stats {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 90%;
    max-width: 400px;
    margin-bottom: 5px; /* Odstęp od dolnej sekcji */
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.label {
    font-size: 10px;
    color: #666;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.value {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.stat-box.main .value {
    font-size: 26px;
    color: var(--gold-color);
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.3);
}

/* --- DOLNA SEKCJA (Serduszka + GOD) --- */
.ui-status {
    display: flex;
    flex-direction: row; /* W jednym rzędzie */
    justify-content: center; /* Na środku */
    align-items: center; /* Równo w pionie */
    gap: 15px; /* Odstęp między sercami a przyciskiem */
    width: 100%;
}

#livesDisplay { 
    font-size: 18px; 
    letter-spacing: 2px; 
    line-height: 1; /* Żeby nie rozpychało wysokości */
}

/* PRZYCISK GOD */
#godModeBtn { 
    border: 1px solid #444; 
    padding: 3px 8px; 
    font-size: 10px; 
    font-weight: bold;
    cursor: pointer; 
    color: #555; 
    border-radius: 4px; 
    text-transform: uppercase;
    line-height: 1;
    transition: 0.2s;
}

#godModeBtn:hover {
    border-color: #666;
    color: #888;
}

#godModeBtn.active { 
    border-color: var(--gold-color); 
    color: var(--gold-color); 
    background: rgba(241, 196, 15, 0.1); 
    box-shadow: 0 0 8px rgba(241, 196, 15, 0.2);
}

/* --- GAME CONTAINER --- */
#game-container { flex-grow: 1; position: relative; background: #000; display: flex; justify-content: center; align-items: center; }
canvas { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: pixelated; }

#overlay { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.92); z-index: 100; 
    display: flex; flex-direction: column; justify-content: center; align-items: center; 
    border: 2px solid #444; 
}
h1 { color: var(--gold-color); margin-bottom: 5px; font-size: 26px; text-transform: uppercase; text-align: center; }
p { margin-bottom: 25px; font-size: 14px; color: #aaa; text-align: center; }

button.btn-start { 
    background: #2c3e50; color: var(--gold-color); border: 2px solid var(--gold-color); 
    padding: 15px 40px; font-size: 18px; font-family: 'Courier New', monospace; 
    font-weight: bold; cursor: pointer; text-transform: uppercase; 
}

/* --- STEROWANIE MOBILNE --- */
#mobile-controls { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; display: none; }
#dpad { position: absolute; bottom: 80px; left: 20px; width: 180px; height: 120px; pointer-events: auto; }
.d-btn { 
    position: absolute; width: 55px; height: 55px; 
    background: rgba(255, 255, 255, 0.1); border: 2px solid rgba(255,255,255,0.2); 
    border-radius: 8px; display: flex; justify-content: center; align-items: center; 
    font-size: 24px; color: rgba(255,255,255,0.8); 
}
.d-btn:active { background: var(--accent-color); border-color: var(--accent-color); }
#btn-up { left: 60px; top: 0; } 
#btn-left { left: 0; top: 60px; } 
#btn-down { left: 60px; top: 60px; } 
#btn-right { left: 120px; top: 60px; }
#btn-action { 
    position: absolute; bottom: 80px; right: 20px; width: 80px; height: 80px; 
    background: rgba(142, 68, 173, 0.4); border: 4px solid var(--accent-color); 
    border-radius: 50%; pointer-events: auto; display: flex; justify-content: center; 
    align-items: center; font-size: 32px; 
}
#btn-action:active { background: var(--accent-color); transform: scale(0.95); }
#btn-action.disabled { opacity: 0.2; pointer-events: none; border-color: #555; }

.shake { animation: shake 0.4s; } 
@keyframes shake { 0%, 100% {transform:translate(0,0);} 25% {transform:translate(-5px,0);} 75% {transform:translate(5px,0);} }
@media (hover: none) and (pointer: coarse) { #mobile-controls { display: block; } }