/* ----------------------
   GAME CONTAINER / BACKGROUND
----------------------- */
#game-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: url('assets/sea-bg.png') repeat-y;
    background-size: cover;
    animation: scrollSea 25s linear infinite;
}

@keyframes scrollSea {
    from { background-position-y: 0; }
    to { background-position-y: -2000px; }
}

/* ----------------------
   PLAYER SHIP
----------------------- */
#playerShip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    z-index: 10;
    transition: transform 0.2s, filter 0.2s;
}

#playerShip.hit {
    filter: brightness(0.5);
    transform: translateX(-50%) scale(0.9);
}

/* ----------------------
   ENEMY SHIPS
----------------------- */
.enemy {
    position: absolute;
    width: 120px;
    z-index: 5;
}

.enemy.flash {
    animation: enemyFlash 0.4s ease-in-out 1 forwards;
}

@keyframes enemyFlash {
    0% { filter: brightness(2) sepia(1) hue-rotate(-50deg); }
    50% { filter: none; }
    100% { filter: brightness(2) sepia(1) hue-rotate(-50deg); }
}

/* ----------------------
   BOMBS
----------------------- */
.bomb {
    position: absolute;
    width: 40px;
    z-index: 8;
}

/* ----------------------
   INSTRUCTIONS CARTE
----------------------- */
#instructions {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 50;
}

#instructions img {
    max-width: 545px; /* 15% plus grand */
    max-height: 545px;
    border: none;
    border-radius: 10px;
}

/* ----------------------
   HUD
----------------------- */
#hud {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #f4e4c1;
    background: #4C3C2E;
    border: 2px solid #d4a574;
    border-radius: 10px;
    padding: 15px 25px;
    font-family: 'Arial', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    z-index: 20;
}

#hud div {
    margin-bottom: 5px;
}

/* ----------------------
   WIN POP-UP
----------------------- */
#win-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* fond semi-transparent */
    display: none;
    z-index: 100;
    justify-content: center;
    align-items: flex-end; /* popup en bas */
    padding-bottom: 50px;
}

#win-popup {
    max-width: 600px;
    max-height: 600px;
    transition: opacity 1s ease;
}

#win-popup img {
    width: 100%;
    height: auto;
}