/* multiplayer.css - Styles for multiplayer UI components */

/* Player Nameplates */
.player-nameplate {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 12px;
    text-align: center;
    user-select: none;
    pointer-events: none;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.player-nameplate.highlighted {
    background-color: rgba(255, 165, 0, 0.8);
    color: white;
}

/* Health Bars */
.player-health-container {
    width: 40px;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
    pointer-events: none;
}

.player-health-bar {
    height: 100%;
    background-color: #00FF00;
    border-radius: 2px;
    transition: width 0.3s, background-color 0.3s;
}

/* Player Health UI */
.player-health-ui {
/* player-health-ui styles */
display: flex;
flex-direction: column;
gap: 5px;
}

.player-health-ui .health-label {
font-size: 12px;
opacity: 0.8;
}

.player-health-ui .health-bar-container {
width: 150px;
height: 15px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.2);
}

.player-health-ui .health-bar {
height: 100%;
background-color: #00FF00;
border-radius: 2px;
transition: width 0.3s, background-color 0.3s;
}

.player-health-ui .health-value {
font-size: 14px;
font-weight: bold;
text-align: center;
}

/* Player Ammo UI */
.player-ammo-ui {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 5px;
}

.player-ammo-ui .weapon-label {
font-size: 12px;
opacity: 0.8;
}

.player-ammo-ui .ammo-value {
font-size: 18px;
font-weight: bold;
}

/* Hit Indicator */
.hit-indicator {
pointer-events: none;
z-index: 999;
}

/* Death Overlay */
.death-overlay {
background-color: rgba(136, 0, 0, 0.5);
}

.death-overlay .death-message {
font-size: 48px;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
margin-bottom: 20px;
}

.death-overlay .respawn-timer {
font-size: 24px;
}

/* Mobile Controls */
#mobileShootButton, #mobileWeaponSwitchButton {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
transform: scale(1);
transition: transform 0.1s;
}

#mobileShootButton:active, #mobileWeaponSwitchButton:active {
transform: scale(0.9);
}

/* Multiplayer Status */
#multiplayerStatus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Player List */
.player-list {
position: fixed;
top: 10px;
left: 10px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
padding: 10px;
color: white;
font-family: Arial, sans-serif;
display: none;
z-index: 1000;
min-width: 150px;
}

.player-list.visible {
display: block;
}

.player-list-title {
font-size: 14px;
font-weight: bold;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
padding-bottom: 5px;
margin-bottom: 5px;
}

.player-list-item {
font-size: 12px;
padding: 3px 0;
display: flex;
justify-content: space-between;
}

.player-list-item .player-name {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.player-list-item .player-health {
color: #00FF00;
}

/* Chat System */
.chat-container {
    position: fixed;
    bottom: unset; /* Remove bottom positioning */
    top: 60vh; /* Position at 60% of viewport height */
    left: 20px;
    width: 300px;
    max-height: 200px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    color: white;
    font-family: Arial, sans-serif;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: opacity 0.5s ease; /* Add smooth transition for opacity */
    opacity: 1; /* Start fully visible */
}

/* Faded out state */
.chat-container.faded {
    opacity: 0;
    pointer-events: none; /* Prevent interaction when faded */
}

/* Mobile specific adjustments for chat container */
@media (max-width: 768px) {
    .chat-container {
        top: 45vh; /* Position at 45% on mobile devices */
        background-color: transparent; /* Transparent background on mobile */
    }
}


.chat-container_old {
position: fixed;
bottom: 80px;
left: 20px;
width: 300px;
max-height: 200px;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 5px;
color: white;
font-family: Arial, sans-serif;
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
transition: height 0.3s;
}

.chat-messages {
flex: 1;
overflow-y: auto;
padding: 10px;
max-height: 150px;
}

.chat-input-container {
display: flex;
padding: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.chat-input {
flex: 1;
background-color: rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
color: white;
padding: 5px;
font-size: 12px;
}

.chat-input:focus {
outline: none;
border-color: rgba(255, 255, 255, 0.5);
}

.chat-message {
margin-bottom: 5px;
font-size: 12px;
}

.chat-message .sender {
font-weight: bold;
color: #AAFFAA;
}

.chat-message .system {
color: #AAAAFF;
font-style: italic;
}

/* Kill Feed */
.kill-feed {
position: fixed;
top: 10px;
right: 10px;
width: 250px;
max-height: 200px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-end;
z-index: 1000;
}

.kill-item {
background-color: rgba(0, 0, 0, 0.6);
color: white;
padding: 5px 10px;
border-radius: 3px;
margin-bottom: 5px;
font-family: Arial, sans-serif;
font-size: 12px;
max-width: 100%;
animation: killFeedFade 5s forwards;
}

.kill-item .killer {
color: #AAFFAA;
font-weight: bold;
}

.kill-item .victim {
color: #FFAAAA;
}

@keyframes killFeedFade {
0% { opacity: 1; transform: translateX(0); }
80% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(20px); }
}