:root { 
    --glow: #00ff41; 
    --team: #00ffff;
    --danger: #ff0000; 
    --bg: #000; 
    --mute: #ffae00;
    --msg: #0088ff;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body { margin: 0; background: var(--bg); color: var(--glow); font-family: monospace; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }

/* Header Styling */
.header-bar { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid #333; background: #0a0a0a; }
.brand { font-size: 1.5rem; font-weight: bold; letter-spacing: 2px; }
.header-controls { display: flex; gap: 10px; }
.header-controls button { padding: 8px 12px; font-size: 10px; border-radius: 5px; font-weight: bold; border: 1px solid var(--glow); background: #000; color: var(--glow); cursor: pointer; }
#loc-toggle.off { border-color: #555; color: #555; }
#flash-btn:active { background: var(--glow); color: #000; }

/* Map Container */
#map-container { height: 35%; position: relative; border-bottom: 2px solid #222; }
#map { height: 100%; width: 100%; background: #080808; }
#recenter-btn { position: absolute; bottom: 15px; right: 15px; z-index: 1000; width: 45px; height: 45px; background: rgba(0,0,0,0.8); border: 1px solid var(--glow); color: var(--glow); border-radius: 50%; font-size: 24px; cursor: pointer; }

/* Comms Deck */
.comms-deck { height: 65%; display: flex; flex-direction: column; padding: 10px; padding-bottom: 80px; background: #000; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-grow: 1; }

.unit-btn { 
    position: relative; background: #111; border: 1px solid #333; color: #888; border-radius: 8px; 
    font-size: 10px; font-weight: bold; display: flex; flex-direction: column; justify-content: center; align-items: center; text-transform: uppercase; 
}
.unit-btn.selected { border-color: var(--glow); color: var(--glow); background: #001a00; }

/* Sub-Buttons (Mute and Message) */
.mute-sub-btn, .msg-sub-btn { 
    position: absolute; width: 22px; height: 22px; border: 1px solid #444; border-radius: 4px; 
    display: flex; justify-content: center; align-items: center; font-size: 12px; z-index: 10; cursor: pointer;
}
.mute-sub-btn { top: 3px; right: 3px; background: #222; color: #666; }
.msg-sub-btn { bottom: 3px; right: 3px; background: #001a33; color: var(--msg); border-color: var(--msg); }

.unit-btn.is-muted { border-color: var(--mute) !important; color: var(--mute) !important; }
.unit-btn.is-muted .mute-sub-btn { background: var(--mute); color: #000; border-color: #fff; }

/* Master Controls */
.master-controls { display: flex; gap: 10px; height: 90px; margin-top: 10px; }
#ptt-btn { flex-grow: 3; background: #400; border: 2px solid #770000; color: #fff; border-radius: 12px; font-size: 1.1rem; font-weight: bold; }
#lock-btn { flex-grow: 1; background: #222; border: 1px solid #444; color: #666; border-radius: 12px; font-size: 10px; }
.locked { background: #990 !important; color: #000 !important; }

/* Pin Styling */
.user-pin { background: var(--glow); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 10px var(--glow); }
.team-pin { background: var(--team); border: 1px solid #fff; border-radius: 50%; }
.flash-anim { animation: flash-pulse 0.5s infinite alternate; }
@keyframes flash-pulse { from { transform: scale(1); box-shadow: 0 0 10px var(--danger); } to { transform: scale(2); box-shadow: 0 0 30px var(--danger); } }