/* Battleship specifikus stílusok */

 
.battleship-board {
    display: grid;
    /* grid-template-columns/rows JS-ben kerül beállításra */
    gap: 2px;
    background-color: #333; /* Rács színe */
    border: 4px solid #333;
    border-radius: 4px;
    user-select: none;
}

.bs-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    color: #555;
}

.bs-header.col-header {
    border-bottom: 2px solid #333;
}

.bs-header.row-header {
    border-right: 2px solid #333;
}

.bs-header.completed {
    color: #ccc; /* Halványítjuk, ha kész */
    background-color: #f0f0f0;
}

.bs-header.error {
    color: #d32f2f; /* Piros, ha túl sok */
}

.bs-cell {
    background-color: #a4d4e6; /* "Ismeretlen" víz szín */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.1s;
}

.bs-cell:hover:not(.locked) {
    background-color: #bce0ee;
}

.bs-cell.water {
    background-color: #e1f5fe; /* Biztos víz */
    color: #0288d1;
}

.bs-cell.ship {
    background-color: #fff; /* Hajó háttér */
    color: #2c3e50; /* Hajó szín */
}

.bs-cell.locked {
    cursor: default;
    filter: brightness(0.95);
}

.bs-cell.mistake {
    animation: flashRed 0.5s ease-in-out;
    background-color: #ffcdd2 !important;
}

.bs-icon {
    width: 70%;
    height: 70%;
}

.battleship-controls {
    display: flex;
    gap: 1rem;
    margin-top: 10px;
}

#timer-display {
    font-family: monospace;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    background: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Animációk */
@keyframes flashRed {
    0%, 100% { background-color: #ffcdd2; }
    50% { background-color: #e57373; }
}

.shake {
    animation: shake 0.5s;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}