@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Roboto+Mono:wght@500;700&display=swap');

#zombie-wrapper {
    --bg-dark: #111;
    --text-color: #ddd;
    --accent-red: #d32f2f;
    --accent-green: #388e3c;
    --font-horror: 'Creepster', cursive;
    --font-code: 'Roboto Mono', monospace;
    
    background-color: var(--bg-dark);
    font-family: var(--font-code);
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 500px;
    border: 4px solid #333;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

#zombie-wrapper:fullscreen {
    width: 100vw; height: 100vh; border: none; border-radius: 0;
}

#zombie-wrapper * { box-sizing: border-box; touch-action: manipulation; }

/* ECRANS */
#zombie-wrapper .game-component {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: #1a1a1a; z-index: 10; transition: opacity 0.3s;
}
#zombie-wrapper .hidden { opacity: 0; pointer-events: none; z-index: -1; display: none !important; }
#zombie-wrapper .active { opacity: 1; pointer-events: auto; display: flex !important; }

/* TEXTES */
#zombie-wrapper h1, #zombie-wrapper h2 {
    font-family: var(--font-horror); color: var(--accent-red);
    text-shadow: 4px 4px 0 #000; letter-spacing: 3px; margin: 10px 0; text-align: center;
}
#zombie-wrapper .game-title { font-size: 3.5rem; }
#zombie-wrapper .blood-text { color: #ff0000; text-shadow: 0 0 20px red; font-size: 4rem; }
#zombie-wrapper .sub-title { color: #888; font-size: 1.1rem; margin-bottom: 30px; }

/* BOUTONS */
#zombie-wrapper .btn-zombie {
    cursor: pointer; font-family: var(--font-horror); font-size: 1.8rem;
    border: none; border-radius: 4px; padding: 10px 40px; margin: 10px;
    background-color: var(--accent-green); color: white;
    box-shadow: 0 6px 0 #1b5e20; transition: transform 0.1s; letter-spacing: 2px;
}
#zombie-wrapper .btn-zombie:hover { filter: brightness(1.2); transform: translateY(-3px); }
#zombie-wrapper .btn-zombie:active { transform: translateY(3px); box-shadow: none; }
#zombie-wrapper .btn-zombie.secondary { background-color: #555; box-shadow: 0 6px 0 #222; }

#zombie-wrapper .btn-icon {
    background: #333; color: white; border: 1px solid #555;
    width: 35px; height: 35px; cursor: pointer; border-radius: 4px;
    font-size: 1rem; display: flex; align-items: center; justify-content: center;
}

/* ATH */
#zombie-wrapper #ui-top {
    position: absolute; top: 0; left: 0; width: 100%; height: 60px;
    padding: 0 20px; background: rgba(0,0,0,0.9);
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid #444; z-index: 20;
}
#zombie-wrapper .ui-stat { font-weight: bold; font-size: 1rem; color: #aaa; }
#zombie-wrapper .ui-stat span { color: #fff; font-size: 1.2rem; margin-left: 5px; }
#zombie-wrapper #hp-box span { color: #e53935; }
#zombie-wrapper .ui-buttons-group { display: flex; gap: 10px; }

/* ZONE JEU */
#zombie-wrapper #game-area {
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, #252a34 0%, #1c1f26 70%, #111317 100%);
    position: relative; overflow: hidden;
}
#zombie-wrapper .shake-screen { animation: screenShake 0.4s both; }
@keyframes screenShake { 10%, 90% { transform: translate(-2px, -2px); } 50% { transform: translate(2px, 2px); } }

/* MAISON */
#zombie-wrapper #house {
    position: absolute; left: 2%; top: 50%; transform: translateY(-60%);
    width: 80px; height: 90px; z-index: 5;
    background: repeating-linear-gradient(to bottom, #6d4c41, #6d4c41 12px, #3e2723 12px, #3e2723 14px);
    border: 3px solid #281815; box-shadow: 10px 10px 20px rgba(0,0,0,0.6);
}
#zombie-wrapper #house::before { 
    content: ''; position: absolute; top: -40px; left: -10px;
    border-left: 50px solid transparent; border-right: 50px solid transparent;
    border-bottom: 40px solid #263238;
}
#zombie-wrapper #house::after {
    content: ''; position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px; background: #ffeb3b; border: 2px solid #3e2723;
    background-image: linear-gradient(90deg, transparent 45%, #3e2723 45%, #3e2723 55%, transparent 55%), linear-gradient(0deg, transparent 45%, #3e2723 45%, #3e2723 55%, transparent 55%);
    box-shadow: 0 0 15px #ffeb3b;
}
#zombie-wrapper #house.exploding { animation: houseExplode 1.2s forwards; }
@keyframes houseExplode { 0% { opacity: 1; } 100% { transform: translateY(-30%) scale(2) rotate(10deg); opacity: 0; } }

/* BARRICADES */
#zombie-wrapper #ramparts {
    position: absolute; left: 14%; top: 0; width: 20px; height: 100%;
    background: repeating-linear-gradient(45deg, #424242, #424242 10px, #303030 10px, #303030 20px);
    border-right: 4px solid #111; z-index: 4; transition: 0.3s;
}
#zombie-wrapper #ramparts.hp-50 {
    background: repeating-linear-gradient(45deg, #5d4037, #5d4037 10px, transparent 10px, transparent 20px);
    border-right: 4px dashed #5d4037; opacity: 0.7;
}
#zombie-wrapper #ramparts.hp-25 {
    background: repeating-linear-gradient(45deg, #b71c1c, #b71c1c 5px, transparent 5px, transparent 30px);
    border-right: none; opacity: 0.4;
}
#zombie-wrapper #ramparts.damaged-flash { filter: brightness(2) sepia(1) hue-rotate(-50deg) saturate(5); }
#zombie-wrapper #ramparts.destroyed { opacity: 0; }

/* ZOMBIES */
#zombie-wrapper .zombie {
    position: absolute; width: 45px; height: 70px;
    background: linear-gradient(to bottom, #527a5b, #3b5943);
    border: 1px solid #2a3f30;
    border-radius: 50% 50% 8% 8% / 40% 40% 10% 10%;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5), 1px 2px 4px rgba(0,0,0,0.6);
    z-index: 6;
    animation: zombieLurch 1.2s infinite ease-in-out alternate;
}
#zombie-wrapper .zombie::before, #zombie-wrapper .zombie::after { 
    content: ''; position: absolute; top: 32%; width: 6px; height: 4px; 
    background-color: #ff1111; border-radius: 50%; border: 1px solid #440000; 
    box-shadow: 0 0 3px 1px #ff4444, inset 0 0 1px black; 
}
#zombie-wrapper .zombie::before { left: 28%; transform: rotate(-10deg); }
#zombie-wrapper .zombie::after { right: 28%; transform: rotate(10deg); }

#zombie-wrapper .zombie.fast { 
    background: linear-gradient(to bottom, #b71c1c, #7f0000); border-color: #ff5252;
    transform: scale(0.9); animation-duration: 0.8s;
}
#zombie-wrapper .zombie.tank { 
    background: linear-gradient(to bottom, #666, #444); transform: scale(1.1); width: 55px; animation-duration: 1.8s;
}

@keyframes zombieLurch { 
    0% { transform: rotate(-5deg) translateY(0); }
    100% { transform: rotate(5deg) translateY(-5px); } 
}

/* MOTS FLOTTANTS */
#zombie-wrapper .zombie-word {
    position: absolute; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #ddd;
    padding: 2px 6px; border-radius: 3px;
    font-family: var(--font-code); font-weight: bold; font-size: 14px;
    border: 1px solid #555; z-index: 20; white-space: nowrap; pointer-events: none;
    margin-top: -40px; 
}
#zombie-wrapper .zombie-word.targeted {
    border-color: #ff4444; color: white; background: rgba(100,0,0,0.9); box-shadow: 0 0 10px rgba(255,0,0,0.5);
}
#zombie-wrapper .typed-part { color: #00ff00; text-shadow: 0 0 5px #00ff00; }

@media (max-height: 600px) {
    #zombie-wrapper .zombie { transform: scale(0.75); }
    #zombie-wrapper .zombie-word { font-size: 12px; margin-top: -30px; }
}

/* PROJECTILES */
#zombie-wrapper .projectile {
    position: absolute; width: 12px; height: 12px;
    background: radial-gradient(circle, #bfff80 20%, #4caf50 100%);
    border-radius: 50%; box-shadow: 0 0 10px #8bc34a; z-index: 15;
}
#zombie-wrapper .laser-beam {
    position: absolute; height: 2px; background: #00ff00;
    transform-origin: left center; z-index: 14; opacity: 0.8; box-shadow: 0 0 5px #00ff00;
}

/* INPUT */
#zombie-wrapper #input-area {
    position: absolute; bottom: 15px; width: 100%; display: flex; justify-content: center; z-index: 30;
}
#zombie-wrapper #typing-input {
    width: 300px; padding: 10px; font-size: 1.4rem; text-align: center;
    background: rgba(20,20,20,0.95); color: #00ff00;
    border: 2px solid #555; border-radius: 5px;
    font-family: var(--font-code); text-transform: uppercase;
    outline: none; transition: 0.3s;
}
#zombie-wrapper #typing-input:focus { border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.2); }

#zombie-wrapper #wave-message {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
    font-family: var(--font-horror); font-size: 5rem; color: #ffeb3b;
    text-shadow: 0 0 20px #ff0000; pointer-events: none; opacity: 0;
    transition: all 0.5s; z-index: 50; white-space: nowrap;
}
#zombie-wrapper #wave-message.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#zombie-wrapper #pause-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); color: white; display: flex; justify-content: center; align-items: center;
    font-family: var(--font-horror); font-size: 4rem; z-index: 100; cursor: pointer;
}

#zombie-wrapper .results-box {
    background: #222; padding: 20px; border-radius: 8px; margin: 20px 0; border: 1px solid #444; text-align: center;
}