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

#gameCanvas {
    --bg-dark: #1a1a1a;
    --text-color: #cccccc;
    --accent-red: #b30000;
    --accent-green: #4a6e45;
    
    background-color: var(--bg-dark);
    font-family: 'Roboto', sans-serif;
    color: var(--text-color);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    aspect-ratio: 16 / 9; 
    min-height: 500px;
    max-height: 90vh;
    border: 4px solid #333;
}

#gameCanvas:fullscreen {
    width: 100vw; height: 100vh; max-width: none; max-height: none; border: none;
}

#gameCanvas * { box-sizing: border-box; }

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

/* TYPO */
#gameCanvas h1, #gameCanvas h2 {
    font-family: 'Creepster', cursive; color: var(--accent-red);
    text-shadow: 3px 3px 0 #000; letter-spacing: 2px; margin: 10px 0;
}
#gameCanvas h1 { font-size: clamp(2rem, 5vw, 4rem); }
#gameCanvas h2 { font-size: clamp(1.5rem, 4vw, 3rem); }

/* BOUTONS */
#gameCanvas button {
    cursor: pointer; font-family: 'Roboto', sans-serif; font-weight: bold;
    text-transform: uppercase; border: none; border-radius: 4px; 
    padding: 10px 25px; font-size: 1.1rem; margin: 10px;
    background-color: var(--accent-green); color: white;
    box-shadow: 0 4px 0 #2e462b; transition: transform 0.1s;
}
#gameCanvas button:hover { filter: brightness(1.1); transform: translateY(-2px); }
#gameCanvas button:active { transform: translateY(2px); box-shadow: none; }
#gameCanvas .ui-buttons-group button { padding: 5px 12px; font-size: 0.9rem; background: #444; }

/* HUD */
#gameCanvas #ui-top {
    position: absolute; top: 0; left: 0; width: 100%;
    padding: 10px 20px; background: rgba(0,0,0,0.85);
    display: flex; justify-content: space-between; align-items: center;
    font-weight: bold; z-index: 20; border-bottom: 2px solid #555;
    font-size: 1.1rem;
}
#gameCanvas #ramparts-health-display { color: #ff4444; }

/* ZONE JEU */
#gameCanvas #game-area {
    width: 100%; height: 100%;
    background: linear-gradient(to bottom, #252a34 0%, #1c1f26 70%, #111317 100%);
    position: relative; overflow: hidden;
}
#gameCanvas #game-area.shake-screen { animation: screenShake 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes screenShake {
  10%, 90% { transform: translate3d(-2px, -2px, 0); }
  20%, 80% { transform: translate3d(4px, 4px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, -6px, 0); }
  40%, 60% { transform: translate3d(6px, 6px, 0); }
}

/* --- MAISON STYLISÉE --- */
#gameCanvas #house {
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    width: 80px; height: 90px;
    z-index: 5;
    
    /* Texture Bois */
    background-color: #5d4037;
    background-image: 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);
    transition: opacity 0.2s;
}

/* Toit */
#gameCanvas #house::before {
    content: '';
    position: absolute;
    top: -40px; left: -10px;
    width: 0; height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 40px solid #263238;
    filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.5));
}

/* Fenêtre */
#gameCanvas #house::after {
    content: '';
    position: absolute;
    top: 20px; left: 50%; transform: translateX(-50%);
    width: 30px; height: 30px;
    background-color: #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;
}

/* Animation Explosion */
#gameCanvas #house.exploding {
    animation: houseExplode 1.2s forwards;
}
@keyframes houseExplode {
    0% { transform: translateY(-50%) scale(1); filter: brightness(1); }
    15% { transform: translateY(-50%) scale(1.1) rotate(5deg); filter: brightness(10) sepia(1) saturate(5); }
    40% { opacity: 1; transform: translateY(-60%) scale(1.5) rotate(-5deg); }
    100% { transform: translateY(-30%) scale(2) rotate(10deg); opacity: 0; filter: brightness(0); }
}

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

/* ZOMBIES */
#gameCanvas .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 2.2s infinite ease-in-out;
}
#gameCanvas .zombie::before, #gameCanvas .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; 
}
#gameCanvas .zombie::before { left: 28%; transform: rotate(-10deg); }
#gameCanvas .zombie::after { right: 28%; transform: rotate(10deg); }

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

@keyframes zombieLurch { 
    0% { transform: translate(0, 0) rotate(-2deg); } 
    25% { transform: translate(-3px, -4px) rotate(4deg); } 
    50% { transform: translate(1px, 1px) rotate(-5deg); } 
    75% { transform: translate(-2px, -3px) rotate(3deg); } 
    100% { transform: translate(0, 0) rotate(-2deg); } 
}

/* MOTS */
#gameCanvas .zombie-word {
    position: absolute; transform: translateX(-50%);
    background: rgba(0,0,0,0.85); color: #ddd;
    padding: 2px 6px; border-radius: 3px;
    font-family: 'Courier Prime', monospace; 
    font-weight: bold; font-size: 14px;
    border: 1px solid #555; z-index: 20;
    white-space: nowrap; pointer-events: none;
    transition: top 0.1s;
}
#gameCanvas .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);
}
#gameCanvas .typed-part { color: #00ff00; text-shadow: 0 0 5px #00ff00; }

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

/* INPUT */
#gameCanvas #input-area {
    position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: center; z-index: 30;
}
#gameCanvas #typing-input {
    width: 300px; padding: 12px; 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: 'Courier Prime', monospace; text-transform: uppercase;
    outline: none; transition: border 0.3s;
}
#gameCanvas #typing-input:focus { border-color: #00ff00; box-shadow: 0 0 15px rgba(0,255,0,0.2); }

/* MESSAGE VAGUE */
#gameCanvas #wave-message {
    position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) scale(0.5);
    font-family: 'Creepster', cursive; font-size: 5rem; color: #ffeb3b;
    text-shadow: 0 0 20px #ff0000; pointer-events: none; opacity: 0;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 50; white-space: nowrap;
}
#gameCanvas #wave-message.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

#gameCanvas #pause-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); color: white;
    display: flex; justify-content: center; align-items: center;
    font-family: 'Creepster', cursive; font-size: 5rem;
    z-index: 100; cursor: pointer; backdrop-filter: blur(5px);
}