/* --- НАВІГАЦІЯ ТА СТАТУСИ --- */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 15px;
}
nav ul li {
    width: 75px;
    padding-right: 15px;
    border-right: 2px solid rgba(69, 193, 235, 0.4);
}
nav ul li:last-child {
    border-right: none;
    padding-right: 0;
}
nav ul li:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
    opacity: 0.9;
}
.stat-header { display: flex; justify-content: center; font-size: 14px; margin-bottom: 6px; }
.stat-value { text-align: center; font-size: 13px; margin-top: 5px; opacity: 0.8; }
.crew-value { text-align: center; font-size: 14px; font-weight: bold; margin-top: 6px; }
.bar { height: 6px; background: rgba(255,255,255,0.15); border-radius: 4px; overflow: hidden; width: 100%; }
.fill { height: 100%; background: rgb(69, 193, 235); }

/* --- СПІЛЬНІ ЗАГОЛОВКИ БЛОКІВ --- */
.action-menu h2, .ship-preview h2, .galaxy-map h2, .map-action-menu h2, .history-section h2 {
    margin-top: 0;
    text-align: center;
}
.history-section h2 {
    border-bottom: 1px solid rgba(69, 193, 235, 0.3);
    padding-bottom: 10px;
}

/* --- КНОПКИ ТА СПИСКИ (SELECT) --- */
.action-menu, .map-action-menu { gap: 15px; } /* Відстань між кнопками */

.action-btn, .action-select {
    background-color: rgb(8, 39, 71);
    color: rgb(69, 193, 235);
    border: 1px solid rgb(69, 193, 235);
    padding: 15px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    font-family: inherit;
    width: 100%;
}
.action-select { appearance: none; text-align: center; }

.action-btn:hover, .action-select:hover:not(:disabled), .action-select:focus:not(:disabled) {
    background-color: rgb(69, 193, 235);
    color: #111;
    box-shadow: 0 0 10px rgba(69, 193, 235, 0.5);
    outline: none;
}
.action-select:disabled { opacity: 0.5; cursor: not-allowed; border-color: rgba(69, 193, 235, 0.3); color: rgba(69, 193, 235, 0.5); }
.action-select option { background-color: rgb(8, 39, 71); color: rgb(69, 193, 235); text-align: left; }

/* --- ПЛЕЙСХОЛДЕРИ ЗОБРАЖЕНЬ --- */
.ship-image-placeholder, .map-img {
    flex-grow: 1;
    border: 2px dashed rgba(69, 193, 235, 0.5);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
}

.ship-img-preview {
    display: none;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.ship-image-text {
    align-items: center;
}

.ship-image-upload{
display: none;
}

.map-img { overflow: hidden; }
.map-img img {
    max-width: 100%; /* Картинка ніколи не буде ширшою за свій контейнер */
    height: auto;    /* Пропорції не спотворяться */
    border-radius: 8px; /* (Опціонально) трохи закруглимо кути для краси */
    display: block;
}

/* --- ІСТОРІЯ ЕКСПЕДИЦІЙ ТА СКРОЛБАР --- */
.history-list { display: flex; flex-direction: column; gap: 10px; max-height: 250px; overflow-y: auto; padding-right: 5px; }
.history-item { display: flex; justify-content: space-between; align-items: center; background: rgba(0, 0, 0, 0.4); padding: 12px 15px; border-left: 4px solid gray; border-radius: 4px; font-size: 14px; }
.history-info { display: flex; flex-direction: column; gap: 5px; }
.history-info strong { color: #fff; letter-spacing: 0.5px; }

.history-item.success { border-left-color: #4CAF50; }
.history-item.success .history-rewards { color: #4CAF50; font-weight: bold; }
.history-item.failure { border-left-color: #F44336; }
.history-item.failure .history-rewards { color: #F44336; font-weight: bold; }

.history-list::-webkit-scrollbar { width: 6px; }
.history-list::-webkit-scrollbar-track { background: rgba(8, 39, 71, 0.5); border-radius: 4px; }
.history-list::-webkit-scrollbar-thumb { background: rgb(69, 193, 235); border-radius: 4px; }

.clear-history-btn{ background-color: #F44336; margin-bottom: 10px }

.timer {
    display: none; 
    text-align: center; 
    color: #FFC107; 
    font-weight: bold; 
    margin-top: -5px;
}

/* --- НАЛАШТУВАННЯ КОРАБЛЯ --- */
.ship-name-input {
    background: transparent;
    border: none;
    border-bottom: 2px solid rgba(69, 193, 235, 0.5);
    color: rgb(69, 193, 235);
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin-bottom: 15px;
    font-family: inherit;
    outline: none;
    padding-bottom: 5px;
    transition: border-color 0.3s ease;
}

.ship-name-input:focus {
    border-bottom-color: #FFC107; /* Жовтий колір при введенні тексту */
}

#ship-image-container {
    cursor: pointer; /* Робить курсор у вигляді "руки", підказуючи, що сюди можна клікати */
    transition: transform 0.2s ease;
}

#ship-image-container:hover {
    transform: scale(1.02); /* Трохи збільшується при наведенні */
}