body { margin: 0; overflow: hidden; background: #111; font-family: 'Arial', sans-serif; user-select: none; }

#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

#crosshair {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.ch-h { position: absolute; width: 20px; height: 2px; background: #0f0; left: -10px; top: -1px;}
.ch-v { position: absolute; width: 2px; height: 20px; background: #0f0; left: -1px; top: -10px;}

#hud {
    position: absolute; bottom: 20px; left: 20px; right: 20px;
    display: flex; justify-content: space-between;
    color: #ffb93b; font-weight: bold; font-size: 30px;
    text-shadow: 2px 2px 0 #000;
}

#money { color: #55ff55; position: absolute; bottom: 60px; right: 20px; font-size: 24px; text-shadow: 1px 1px 0 #000; }

#damage-flash {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,0,0,0.4); opacity: 0; transition: opacity 0.1s; pointer-events: none;
}

#headshot-msg {
    position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%);
    color: #ff0000; font-size: 24px; font-weight: bold; text-shadow: 2px 2px 0 #000;
    opacity: 0; transition: opacity 0.2s;
}

/* MENU STYLES */
.menu-box {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 500px; background: rgba(30,30,30,0.95); border: 2px solid #ffb93b;
    color: #ffb93b; padding: 20px; pointer-events: auto; font-family: 'Courier New', Courier, monospace;
    display: none; text-align: center;
}
.menu-btn {
    background: #333; color: white; padding: 10px; margin: 5px; border: 1px solid #555; cursor: pointer;
    font-size: 18px;
}
.menu-btn:hover { background: #555; border-color: #ffb93b; }

#shop-menu .shop-item { text-align: left; display: flex; justify-content: space-between; padding: 10px; border-bottom:1px solid #444; cursor: pointer;}
#shop-menu .shop-item:hover { background: #444; }

#start-screen {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9); color: white; pointer-events: auto; z-index: 20;
}

/* LOGIN MODAL */
#login-modal {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: #111; color: white; pointer-events: auto; z-index: 50;
}
#login-modal input {
    padding: 10px; margin: 10px; font-size: 18px; width: 300px; text-align: center;
}

#killfeed { position: absolute; top: 10px; right: 10px; text-align: right; color: #ffb93b; font-weight: bold; font-size: 16px; text-shadow: 1px 1px 0 #000; }

.dead-msg { color: red; font-size: 40px; font-weight: bold; margin-bottom: 20px;}

/* CHAT */
#chat-container {
    position: absolute; bottom: 20px; left: 20px;
    width: 400px;
    display: flex; flex-direction: column; justify-content: flex-end;
    pointer-events: none; 
}
#chat-history {
    max-height: 200px; overflow-y: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    margin-bottom: 5px;
    text-shadow: 1px 1px 0 #000;
    font-size: 16px; color: white;
}
#chat-history div {
    padding: 2px 5px;
    margin-top: 2px;
    background: rgba(0,0,0,0.3); /* Subtle background for readability */
    border-radius: 2px;
}
#chat-input {
    width: 100%; background: rgba(0,0,0,0.8); border: 1px solid #aaa;
    color: white; padding: 5px; pointer-events: auto;
    display: none; /* Hidden by default */
}

/* SCOREBOARD */
#scoreboard {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 600px; background: rgba(20,20,20,0.85); 
    border: 2px solid #aaa; color: white; padding: 20px; 
    pointer-events: none; font-family: 'Arial', sans-serif;
    z-index: 100; display: none;
}
#scoreboard h3 { margin-top: 0; text-align: center; color: #ffb93b; }

#hints-panel {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 280px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 185, 59, 0.4);
    color: #e0e0e0;
    font-size: 14px;
    padding: 10px;
    line-height: 1.4;
    pointer-events: none;
    text-shadow: 1px 1px 0 #000;
}
#hints-panel strong { color: #ffb93b; }

#bomb-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    background: rgba(255, 64, 64, 0.8);
    border: 1px solid rgba(255, 0, 0, 0.6);
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 0 #000;
    display: none;
}

.menu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 700px;
}